/*
Theme Name: Premiun 01  -  Seo Consulting Perú
Theme URI: Seoconsultingperu.com
Author: Seo Consulting 
Author URI: 
Description: Plantilla Básica Seo Consulting

*/

*{padding: 0; margin: 0;}
@font-face{font-family: 'IP';src: url('font/impact.ttf') format('truetype');}
body{    --color1: #686868;
    --color2: #e31f22;
    --color3: #dc0f2b; --font1: "Space Grotesk", sans-serif;--font2: "Space Grotesk", sans-serif;}
.container{width: 1180px; margin: 0 auto;}
.row{display: flex; justify-content: space-between;} .direction{flex-direction: row-reverse;}
.padded{padding: 70px 0px;}
.grid_5{display: grid; grid-template-columns: repeat(5, 3fr); grid-column-gap: 12px; grid-row-gap: 10px;}
.grid_4{display: grid; grid-template-columns: repeat(4, 3fr); grid-column-gap: 12px; grid-row-gap: 12px;}
.grid_3{display: grid; grid-template-columns: repeat(3, 3fr); grid-column-gap: 20px; grid-row-gap: 20px;}
.grid_2{display: grid; grid-template-columns: repeat(2, 3fr); grid-column-gap: 34px; grid-row-gap: 27px;}
.row-center{display: flex; align-items: center; justify-content: space-between;}
#icoNav_movil{background: var(--color1); width: 51px; height: 51px; border-radius: 50%; padding: 18px 15px;  box-sizing: border-box; margin-left: 10px; display: none;}
#icoNav_movil ul li {
    width: 100%;
    height: 2px;
    background: #fff;
    display: block;
    margin-bottom: 4px;
    transition: all 0.5s ease-in-out;
}
.closeNav ul li:nth-child(1){opacity:0;}
.closeNav ul li:nth-child(2){transform:rotate(45deg);margin-bottom:-2px !important;}
.closeNav ul li:nth-child(3){transform:rotate(-45deg);}
a{text-decoration: none;}
body::-webkit-scrollbar {
	background: #f8f8f9;
	width: 5px;
}
.tags a{background: var(--color1); color: #fff; padding: 3px; border-radius: 10%; font-size: 14px;}
.thumb-page a{display: block; width: 100%; height: 350px; background-size: cover !important; background-position: center !important;}
body::-webkit-scrollbar-thumb {
	background: var(--color1) ;
	z-index: 300;
	border-radius: 1px;
}

.thumb-page{position: relative;}
.tags{position: absolute; width: 100%; height: 100%; background: linear-gradient(90deg,rgba(220, 15, 43, 1) 0%, rgba(34, 36, 41, 0.52) 50%, rgba(220, 15, 43, 1) 100%); z-index: 2; display: flex; align-items: center; justify-content: center;}
.tags h1{color: #fff; text-align: center; width: 100%; font-size: 40px;}
.thumb-img{width: 100%; height: 300px;} .thumb-img img{width: 100%; height: 100%; object-fit: cover;}
.slide{width: 100%; height: 500px; background: var(--color1);}
.entry{
    padding: 10px 0px;
    background: var(--color3);
    border-bottom: 1px solid #474747;
}
:root {
    --red-abba: #D71920;
    --gray-abba: #939598;
    --dark-text: #1a1a1a;
}

.social-container {
    position: fixed;
    bottom: 150px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333; /* Color minimalista inicial */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px); /* Efecto cristal */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 1);
    transition: all 0.3s ease;
    font-size: 19px;
}
/* Efectos Hover */
.social-btn:hover {
    transform: translateY(-5px);
    color: #fff;
}

.facebook:hover { background-color: #1877F2; }
.youtube:hover { background-color: #FF0000; }
.whatsapp:hover { background-color: #25D366; }
.instagram:hover { background-color: #000; color:#fff}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loader-content {
    text-align: center;
    width: 300px;
}

/* Animación de los bloques del isotipo */
.logo-iso {
    display: grid;
    grid-template-columns: repeat(3, 30px);
    gap: 5px;
    justify-content: center;
    margin-bottom: 20px;
    perspective: 1000px;
}

.block {
    width: 30px;
    height: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: buildBlock 0.5s forwards;
}

.block.red { background: var(--red-abba); }
.block.gray { background: var(--gray-abba); }

/* Retrasos para simular construcción */
.block:nth-child(1) { animation-delay: 0.1s; }
.block:nth-child(2) { animation-delay: 0.2s; }
.block:nth-child(3) { animation-delay: 0.3s; }
.block:nth-child(4) { animation-delay: 0.4s; }
.block:nth-child(5) { animation-delay: 0.5s; }
.block:nth-child(6) { animation-delay: 0.6s; }

@keyframes buildBlock {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tipografía y Efecto de Brillo */
.logo-text {
    font-family: 'Arial Black', sans-serif;
    font-size: 3rem;
    color: var(--red-abba);
    margin: 0;
    position: relative;
    overflow: hidden;
}

.logo-text span {
    font-size: 1rem;
    color: var(--dark-text);
    vertical-align: middle;
}

.tagline {
    font-family: 'Arial', sans-serif;
    letter-spacing: 4px;
    font-size: 0.7rem;
    color: var(--dark-text);
    margin-top: -5px;
    font-weight: bold;
}

/* Barra de progreso */
.progress-container {
    width: 100%;
    height: 2px;
    background: #eee;
    margin-top: 30px;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: var(--red-abba);
    transition: width 0.1s linear;
}

header{ width: 100%;  z-index: 222;background: #fff;}
.entry p{
    font-family: var(--font1);
    color: #fff;
    font-size: 13px;
    display: inline-block;
}
.entry a{
    font-size: 14px;
    color: #fff;
    margin-right: 15px;
    font-family: var(--font1);
}.entry a i{margin-right: 4px; font-size: 20px; color: #FFF; margin-left: 10px;} 
.redes a{margin-right: 1px;}
.txt-contact .redes a i{font-size: 29px;}
.cabecera{
    padding: 16px 0px;
    z-index: 122;
    width: 100%;
	position: relative;
}
.cabecera h1{
    color: #fff;
}
/* Posicionamiento del menú padre */
/* El contenedor general del menú (donde están Inicio, Empresa, Productos...) */
.nav-menu {
    position: relative; /* Aquí es donde definimos el punto de anclaje */ width: 59%;
}
.menu{display: flex; align-items: center; justify-content: center;}

/* El elemento li de "Productos" debe ser estático */
.mega-menu-item {
    position: static; display: block;
}

/* El mega menú ahora se posicionará respecto a .nav-menu */
.mega-menu-content {
        position: absolute;
    top: 55px;
    left: 0;
	right: 0;
	margin: 0 auto;
    width: 129%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    padding: 30px; /* Espaciado interno */
    z-index: 9999; /* Asegura que esté por encima de todo */
    visibility: hidden;
    opacity: 0;
    transition: 0.3s; border-radius: 20px;
}

.locs .image{height: 300px; border-radius: 10px; overflow: hidden; display: inline-block; width: 100%; position: relative;}
.locs .image h3{position: absolute; left: 20px; bottom: 20px; color: #fff; border-left: 3px solid #fff; padding-left: 10px;}
.locs .image::before{content:""; width: 100%; height: 100%; position: absolute; display: block; background: linear-gradient(180deg,rgba(220, 15, 43, 0.5) 26%, rgba(34, 36, 41, 0) 50%, rgba(220, 15, 43, 0.5) 79%); transition: all 0.5s linear}
.locs .image:hover::before{background: linear-gradient(180deg,rgba(220, 15, 43, 0.5) 0%, rgba(34, 36, 41, 0) 50%, rgba(220, 15, 43, 0.5) 100%); transition: all 0.5s linear}
.locs .image img{width: 100%; height: 100%; object-fit: cover; object-position: center;}

/* Activación al pasar el mouse */
.mega-menu-item:hover .mega-menu-content {
    visibility: visible;
    opacity: 1;
}

/* Distribución de columnas */
.mega-column { flex: 1; padding: 0 15px; }
.mega-column h4 { color: #333; border-bottom: 2px solid var(--color3); padding-bottom: 10px;  margin-bottom: 30px;}
.mega-column ul { list-style: none; padding: 0; }
.mega-column ul li a { display: block; padding: 5px 0; color: #666; text-decoration: none; }
.mega-column ul li a:hover { color: #007bff; }
#headerPopup{
  width:75%;
  margin:0 auto;
}

#headerPopup iframe{
  width:100%;
  margin:0 auto;
}
#headerVideoLink{
	position: relative;
}
#headerVideoLink .g-video{
	position: absolute;
	top: 30%;
	left: 40%;
	z-index: 10;
}

.service_home{padding: 70px 0px}
.service_home .owl-serv2 article{padding: 20px; border-radius: 6px;  background: #f2f2f2; box-sizing: border-box; text-align: center;}
.service_home .owl-serv2 article img{width: auto; display: block; margin: 0 auto; margin-bottom: 14px; height: 142px;}
.service_home h3{color: var(--color3); font-size: 18px; height: 46px; display: flex; align-items: center; justify-content: center;}
.service_home .owl-serv2 p{padding: 15px 0px; color: #666; font-size: 14px;}
.service_home a.btn{border-radius: 40px}


/* Contenedor de la miniatura */
.video-container {
  position: relative;
  width: 100%; height: 200px; overflow: hidden; border-radius: 12px; margin-bottom: 15px;
  cursor: pointer; display: flex; justify-content: center; align-items: center;
}
.play-button{position: absolute; left: 0; right: 0; top: 38%;  margin: auto; z-index: 222; text-align: center; color: #fff; font-size: 50px; text-shadow: 0px 0px 10px 0px #000}
.play-button i{    text-shadow: 0px 18px 110px #a70000;}

/* El fondo oscuro del modal */
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

/* Contenedor del video en el centro */
.modal-content {
  position: relative;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
  max-width: 800px;
}

/* Botón de cerrar */
.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* Proporción 16:9 para el iframe */
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.service_home .title h5{font: 700 34px IP; color: var(--color2); letter-spacing: 2px; text-transform: uppercase;}
.service_home .title p{font-size: 16px; color: #666; max-width: 900px; margin: 0 auto; padding: 10px 0px 30px; }

ul.sub-menu{display: block !important; background: var(--color1);}

.tagas h3{background: var(--color1); color: #fff !important; display: inline-block; padding: 3px 5px; font-size: 15px; margin: 3px;}

.cabecera .menu li{
    list-style: none;
}
.menu a{
    font: 15px var(--font2);
    color:var(--color1);
    padding: 15px;
}
.btn{
    background: var(--color3);
    padding: 12px 35px;
    color: #fff;
    font: 15px var(--font1);
    display: inline-block;
    font-weight: 700;
    border-radius: 5px;
    position: relative;
}
.btn span{
    position: relative;
    z-index: 2;
}
.btn::after{
    content: '';
    width: 100%;
    height: 0%;
    transition: .5s ease;
    background-color: var(--color2);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
}
.btn::before{
    content: '';
    width: 100%;
    height: 0%;
    transition: .5s ease;
    background-color: var(--color2);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.btn:hover::before, .btn:hover::after{
    height: 51%;
}
.thumb-nos{
    width: 40%;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    margin: 0px 10px;
}
.thumb-nos img{
    width: 100%;
}
.nos-int{
    padding: 30px;
    background: #0b2f50d9;
    position: absolute;
    top: 20%;
    right: 0px;
    display: none;
    z-index: 2;
}
.nosotros{
    box-sizing: border-box;
    max-width: 1360px;
    margin: 0 auto;
    padding: 50px 0px 70px;
}
.thumb-nos p{
    padding: 10px;
    border-bottom: 2px solid #ffffff94;
    font-size: 16px;
    font-family: var(--font2);
    line-height: 40px;
    color: rgba(255, 255, 255, 0.8);
}
.thumb-nos p:nth-child(1){
    padding-top: 0px;
}

.thumb-nos p strong{
    font-size: 25px;
    font-weight: 700;
    color: #fff;
}
.nosotros .row-center{
    justify-content: center;
}
.txt-nos{
    max-width: 650px;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
}
h6.title{
    position: relative;
    padding-left: 45px;
    display: inline-block;
    color: var(--color2);
    font-family: var(--font2);
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: -1px;
}
h6.title::before {
    content: '';
    width: 40px;
    height: 2px;
    background-color: var(--color2);
    position: absolute;
    left: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
h3.title{
    font-family: IP;
    font-size: 55px; line-height: 30px;
    font-weight: 300;
    color: var(--color1);
    position: relative;
    margin: 15px 0px 22px 0px;
    z-index: 222;
}

a.phone{font: 46px IP; color: var(--color1);}
.nosotros h3.title::before{
    content: "";
    display: block;
    
    width: 40px;
    height: 40px;
    position: absolute;
    left: -10px;
    top: -10px;
    z-index: -1;
}
.txt-nos h5 strong{ color: var(--color3); font-size: 26px; font-weight: 500; letter-spacing: 1px;}
.txt-nos h5{width: 100%; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #ccc;}

.blog{padding: 80px 0px;}
.thumb-img img{display: block; width: 100%;}.blog .grid_3 h2{padding: 10px 0px;}
p.subtitle{
    font: 15px var(--font2);
    max-width: 60%;
    color: #7b7b7b;
}

footer li::marker{color: #fff;}
.txt-nos p{
    font: 13px var(--font2);
    margin-bottom: 10px;
    color: #7b7b7b;    line-height: 20px; text-align: justify;
}
.txt-nos li{
    list-style: none;
    font: 12px var(--font2);
    margin: 8px;
    color: #7b7b7b;
}
.txt-nos li i{
    color: var(--color2);
    font-size: 15px;
    margin-right: 3px;
}
.txt-nos .btn{
    border-radius: 0px;
    margin-top: 15px;
}

.features h3{
    font: 23px var(--font1);
    font-weight: 700;
    margin-bottom: 12px;
    color: #212529;
}
.features p{
    font: 15px var(--font2);
    color: #666;
    line-height: 1.8;
}
.features article{
    padding: 41px 25px;
}
.features article:nth-child(1){background: #f2f2f2;}
.features article:nth-child(2){background: var(--color3);}
.features article:nth-child(2) p{color: #fff;}.features article:nth-child(2) h3{color: #fff;}
.features article:nth-child(3) p{color: #fff;}.features article:nth-child(3) h3{color: #fff;}
.features article:nth-child(3){background: var(--color1);}

.features span{
    display: inline-block;
    max-width: 70%;
}
.features{padding: 40px 0px;position: relative;}


.process, .services{
    background: #f9faff;
    padding: 70px 0px;
}
.number{
    width: 90px;
    height: 90px;
    text-align: center;
    display: flex;align-items: center; justify-content: center;
    background: var(--color3);
    font-weight: 700;
    color: #fff;
    font-family: var(--font2);
    border-radius: 50%;
    position: relative;
    z-index: 2;    margin: 0 auto;
    margin-bottom: -52px;
}
.txt-process{
    padding: 40px 30px;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    margin-top: 30px;
    box-shadow: 0 0 30px 0 rgb(27 68 163 / 7%);
}

.clientes{padding: 70px 0px}
.cl{width: 100%;
    height: 155px;
    background: #f2f2f2;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;}
.owl-marcas .cl img{width: 100%; height: 100% !important; object-fit: cover !important; object-position: center !important;}

.txt-process h4{
    font: 20px var(--font2);
    color: #242424;
    font-weight: 600;

}
.txt-process p{
    font: 13px var(--font2);
    color: #131313;
    margin: 15px 0px;
    line-height: 25.5px; text-align: justify;
}
.process article:nth-child(2n+2) .txt-process{
    margin-bottom: 20px;
}
.btn1 {
  display: flex;
  align-items: center;
  padding: 10px 25px; margin: 10px 0px;
  border-radius: 50px; /* Forma de píldora */
  text-decoration: none;
  color: white;
  transition: transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn1:hover {
  transform: scale(1.02);
}

/* Colores específicos con degradados */
.btn-whatsapp {
  background: linear-gradient(to bottom, #3e7d37, #2d5d28);
}

.btn-call {
  background: linear-gradient(to bottom, #d62222, #b51c1c);
}

/* Estilo del icono */
.btn1 .icon {
  width: 35px;
  height: 35px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn1 .icon img, .btn1 .icon svg {
  width: 100%;
  height: 100%;
  color: white;
}

/* Estilo del texto (dos líneas) */
.btn1 .text {
  display: flex;
  flex-direction: column;
}

.btn1 .title {
  font-size: 1.2rem; color: #fff;
  font-weight: bold;
  line-height: 1.1;
}

.btn1 .subtitle {
  font-size: 0.9rem;
  font-weight: 300;color: #fff;
  opacity: 0.9;
}
.number::before, .g-video::before{
    content: '';
    display: inline-block;
    width: 50px; height: 50px;
    border-radius: 100%;
    border: 3px solid var(--color1);
    background: var(--color1);
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring 1.5s infinite;
} 
.number::after, .g-video::after{
    content: '';
    display: inline-block;
    width: 80px; height: 80px;
    border-radius: 100%;
    background: var(--color3);
    border: 1px solid var(--color3);
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring 1.5s infinite;
}
.number:hover::after, .number:focus::after, .g-video:hover::after{
    animation: none;
    display: none;
}
@keyframes ring {
    0% {
      width: 30px;
      height: 30px;
      opacity: 0.5;
    }
    100% {
      width: 60px;
      height: 60px;
      opacity: 0;
    }
}
.thumb-serv{
    width: 399px;
    height: 288px;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
}

.owl-carousel .owl-dots{
   margin-top: 20px;
    justify-content: center;
}
.owl-carousel button.owl-dot{
    background: #d0d0d0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0px 10px;
}
.owl-carousel button.owl-dot.active{
    background: var(--color1);
}
.thumb-serv img{
    width: auto !important;
    height: 100% !important; 
    transition: all 0.4s ease-in-out;
}
.txt-serv{
    width: 100%;
    padding: 28px 30px 20px;
    box-sizing: border-box;
    background: var(--color1);
    position: relative;
    overflow: hidden;

}
.serv1 .link{
    position: absolute;
    right: -94px;
    top: -100px;
    width: 188px;
    height: 188px;
    background: #a96f0554;
    color: #fff;
    display: flex;
    align-items: flex-end;
    border-radius: 50%;
    padding: 0px 0px 34px 50px;
    box-sizing: border-box;
    font-size: 23px;
    transition: all 0.4s ease-in-out;
}
.serv1:hover .thumb-serv img{
    transform: scale(1.1);
}
.serv1:hover .link{
    background: var(--color2);
}
.txt-serv a h2{
    color: #fff;
    font: 18px var(--font2);
    font-weight: 500;
    margin-bottom: 7px;
}
.txt-serv p{
    font: 14px var(--font2);
    color: #aeaacb;
    text-transform: uppercase;
}





.tabs_links{ width: 100%; margin: 0 auto; max-width: 100%; margin-bottom: 30px; grid-column-gap: 0px;
    grid-row-gap: 0px; border-radius: 20px; overflow: hidden;}
.tabs_item{ width:100%;     background: #f2f2f2;
    color: #353535;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.8s;
    padding: 13px 15px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    font-family: var(--font1);
 border-right: 1px solid #fff;}
.tabs_item img{width: 35px; filter: opacity(66%); margin-right: 10px;}
.tabs_item h2{font-size: 16px; font-weight: 400; display: flex;
    align-items: center;}.tabs_item.active img{filter: opacity(100%);}
.panels{position: relative; width: 100%;min-height: auto;margin: 0 auto; transition: all 0.5s ease-in-out;}
.tabs-container{margin-top: 30px; height: auto !important;}
.panel-item{position: absolute; top: 0;left: 0; width: 100%; height: 100%;opacity: 0.0; transition: all 0.8s; }
.active{z-index: 100;  opacity: 1; position:static;}
a.active{ background: #f2f2f2;  color: #000; position: relative; box-shadow: 0px 0px 0px transparent;}
a.active::before{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--color3);}



.contact{
    padding: 96px 0px;
    background: url(https://seoconsultingperu.com/productos/abbasac/wp-content/uploads/2026/03/fondo.jpg);
    background-size: cover;
    background-position: center;
}


.loc{border: 9px solid #fff; border-radius: 20px; overflow: hidden; width: 50%; background: #fff;}
.loc iframe {
    width: 100%;       /* Se adapta al ancho del padre */
    height: auto;      /* Mantiene la proporción */
    aspect-ratio: 16 / 9; /* Fuerza la relación de aspecto del video */
    display: block;
}
.loc h5{font: 13px var(--font1); color: var(--color1); padding: 5px 0px; text-align: center; width: 100%;}

.cnt{

    display: inline-block;
    max-width: 584px;
    box-sizing: border-box;
}
.cnt h3.title{
    font: 36px var(--font2);
    line-height: 46px;
    font-weight: 700;
    padding-left: 37px;
    border-left: 4px solid var(--color1);
    margin: 15px 0px 22px 0px;
}
.cnt ul li{list-style: none; color: #666; padding: 5px 0px;}
.cnt p{
    font: 16px var(--font1);
    line-height: 27px;
    color: #7b7b7b;
    margin-top: 23px;
}
.cnt .default{
    margin-left: 15px;
    border: 1px solid var(--color1);
    background: transparent;
    color: var(--color1);
}
.video{
    padding: 70px 0px 200px;
    background: url(img/cnt1.webp);
    background-size: cover;
}
.vi-nos{
	padding: 70px 0px 70px;
}
.g-video{
    background: #fff;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    color: var(--color1);
    font-size: 30px;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
	display: block;
}
.g-video::before, .g-video::after{
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.5);
    animation: ring2 1.5s infinite;
    border: 1px solid #fff;
}
.g-video::after{
    animation: ring2 1.6s infinite;
}
@keyframes ring2 {
    0% {
      width: 70px;
      height: 70px;
      opacity: 0.5;
    }
    100% {
      width: 160px;
      height: 160px;
      opacity: 0;
    }
}
.video h3.title{
    color: #fff;
    font-size: 25px;
    font-weight: var(--font1);
}

.form-page{
    background: url(img/slide-page.png);
    background-size: cover;
    background-position: left;
    padding: 50px 0px;
    padding-left: 150px;
    box-sizing: border-box;
    width: 864px;
    text-align: center;
    max-width: 100%;
}
.form-page h2{
    color: #fff;
    font-size: 40px;
}.form-page h3{
    color: #fff;
    font-size: 28px;
    padding-bottom: 10px;
}.form-page h5{
    color: #fff;
    font-size: 20px;
    max-width: 500px;
    margin: 0 auto;
    font-weight: 400;
}

.form-page form{
    width: 500px;
    margin: 0 auto;
    max-width: 96%;
}
.form-page .grid_2{
    margin-top: 19px;
}
.form-page input, .form-page textarea{
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    font: 14px var(--font1);
    color: #555;
    padding: 10px;
}
.form-page textarea{
    height: 110px;
    margin-top: 19px;
}
#enviar{
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    width: 100%;
    margin-top: 10px;
}

.box-contact{
    padding: 40px;
    width: 70%;
    box-sizing: border-box;
}
.box-contact h3.title{
    font-size: 30px;
}
.formulario h3.title{
    margin-bottom: 38px;
}
.box-form{
    box-shadow: 0 0 30px 0 rgb(27 68 163 / 7%);

    background: #fff;
    z-index: 100;
    position: sticky;
}
.box-form .grid_2{
	margin-top: 27px;
}
.box-contact input, .box-contact select, .box-contact textarea{
    width: 100%;
    height: 48px;
    border: 1px solid #e4e4e4;
    padding: 12px 15px 11px;
    box-sizing: border-box;
    font: 14px var(--font2);
    color: #666;
    outline: none;
    background-color: #fdfdfd;
}
.box-contact textarea{
    margin-top: 29px;
    height: 90px;
}
.txt-contact{
    width: 30%;
    box-sizing: border-box;
    padding: 40px;
}
.txt-contact i{
    font-size: 25px;
    color: var(--color3);
    text-align: left;
    padding-right: 10px;
}
.txt-contact h4{
    font-size: 20px;
    color: var(--color1);
}
.txt-contact a{
    font-size: 19px;
    color: var(--color1);
}
.txt-contact .row{
    justify-content: flex-start;
}
.title h4{
    font-size: 30px;
}
.title h3{
    font-size: 30px;padding-bottom: 30px; font-family: IP; color: var(--color1); letter-spacing: 2px;
}
.box-form .redes{
    margin-top: 40px;
}
.txt-contact .row{
    margin-bottom: 15px;
}

.fix-btn {
    background: rgb(1, 172, 7);
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 30px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
	z-index: 1023;
	animation: pulse5 1s infinite;
}
@keyframes pulse5{
	0%{
		transform: scale(.99);
		box-shadow: 0 0 0 0 rgba(0,0,0,0.5);
	}
	70%{
		transform: scale(1);
		box-shadow: 0 0 0 25px rgba(0,0,0,0.0);
	}
	100%{
		transform: scale(.99);
		box-shadow: 0 0 0 0 rgba(0,0,0,0.0);
	}
}
.box-contact select{
    background-image: linear-gradient(45deg,transparent 50%,gray 50%),linear-gradient(135deg,gray 50%,transparent 50%),linear-gradient(to right,#ccc,#ccc);
    background-position: calc(100% - 20px) calc(1em + 4px),calc(100% - 16px) calc(1em + 4px),calc(100% - 2.5em) .7em;
    background-size: 7px 5px,5px 7px,1px 1.5em;
    background-repeat: no-repeat;
  -webkit-appearance: none;
}
.box-contact textarea{
    margin-top: 28px;
    height: 107px;
}
#enviar{
    display: inline-block;
    background: var(--color1);
    width: auto;
    color: #fff;
    text-transform: uppercase;
    margin-top: 25px;
    letter-spacing: 1px;
}


.proyects{
    padding: 70px 0px;
}
.category_list{
    width: 60%;
    margin: 0 auto;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}
.category_item{
    font: 14px var(--font2);
    font-weight: 700;
    padding: 20px 10px 0px;
    color: #54595f;
    text-align: center;
    transition: all 0.4s;
    cursor: pointer;
    text-transform: uppercase;
    float: left;
    margin-bottom: 10px;
    border-bottom: 2px solid transparent;
    padding-bottom: 10px;
}
.products-list{
    grid-column-gap: 20px !important;
    grid-row-gap: 20px !important;
    margin-top: 40px;
    width: 100%;
}
.ct_item-active{
    transition: all 0.4s;
    color: var(--color2);
    border-bottom: 2px solid var(--color2);
}
.product-item{
    width: 100%;
    height: auto;
    background: #000;
    transition: all 0.4s;
}
.line{
    border-top: 1px solid #ccc;
    margin: 0 auto;
    width: 1200px;
    max-width: 100%;
    margin-bottom: 30px;
}
.txt-proyect{
    background-color: rgba(34,41,49,0.9);
    padding: 210px 30px 50px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.4s;
    opacity: 0.0;
    
}
.txt-proyect h2{
    font-size: 28px;
    font-family: var(--font2);
    color: #fff;
}
.product-item:hover .txt-proyect{
    opacity: 1;
}
.txt-proyect p{
    color: #aeaacb;
    font: 14px var(--font2);
}
.txt-proyect a{
    font-family: var(--font2);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    font-style: normal;
    text-decoration: none;
    letter-spacing: 1px;
    color: var(--color2);
    margin-top: 30px;
    display: block;
}

p, a, span, div{font-family: var(--font1);}
footer{
    background:linear-gradient(83deg, rgb(187 29 29) 7%, rgb(109 1 1) 100%);background-attachment: fixed;
    background-size: cover;
    padding: 80px 0px 0px;
}
.f1{
    width: 23%;  
	margin-right: 42px; 
}
.f1 p{
	text-align: justify;
}

.f1 a{
    color: #ccc;
    padding: 8px 20px;
    border: 1px solid #ccc;
    display: inline-block;
    margin-top: 20px;
}
footer h4{
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 18px;
}
footer p, footer a{
    color: #fff;
    display: block;
    font-size: 14px;
}
footer a{
    margin-bottom: 10px;
}
.f3 img{ 
    opacity: 0.7;
}
.redes{
    display: flex;
}
footer .redes a{
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 50%;
    padding: 0px !important;
    margin: 5px;
}

.copy{
    padding: 22px 0px 26px;
    border-top: 1px solid #cccccc;
    margin-top: 0px;
}

.box-f {
    padding: 0px 43px 22px 43px;
    border-right:1px solid #cccccc

}
.box-f i{
    color: #fff;
    font-size: 20px;
    padding-right: 15px;
}
.box-f a{
    line-height: 20px;
    font-size: 16px;
    margin-bottom: 0px;
}
.boxs{
    border-bottom: 1px solid #cccccc;
    margin-bottom: 60px;
}
.single-slide{
    height: 350px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    background: url(img/slide-page.jpg);
    background-size: cover;
    background-position: center;
}


.titulo{
    position: absolute;
    top: 35%;
    left: 6.5%;
    color: #242424;
}
.titulo a{
    color: #666;
    font: 15px var(--font2);
}
.titulo span span{
    padding: 0px 5px;
}

.page-serv{
    padding: 70px 0px;
}
.page-serv article{
    width: 780px;
    max-width: 100%;
}
.page-serv article img{
    width: 100%;
}
.thumb-page{
    width: 100%;
    max-height: 424px;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
}
.page-serv article h1{
    margin: 35px 0px 25px;
    font: 40px var(--font1);
    font-weight: 400;
    color: #242424;
}
.page-serv article p, .page-serv article li{
    font: 16px var(--font2);
    line-height: 34px;
    margin-bottom: 20px;
    color: #686a6f;
    list-style: none;
}
.page-serv article li{
	margin-bottom: 0px !important;	
	line-height: 30px;
}
.page-serv article li::before{
	    content: "\F0054";
    font-family: "Material Design Icons";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
   	margin-right: 5px;
    line-height: 30px;
    color: var(--color2);
}
li.blocks-gallery-item::before{
	display: none !important;
}
li.blocks-gallery-item figure{
	margin-bottom: 20px !important;
}
.page-serv h2, .page-serv h3, .page-serv h4, .page-serv h5, .page-serv h6{
    font-family: var(--font1);
    color: #000;
}
.page-serv .blocks-gallery-item figure{
    overflow: hidden;
    border-radius: 7px;
}


.page-serv aside{
    width: 370px;
    max-width: 100%;
    margin-left: 30px;
}
.serv-list{
    padding: 45px;
    box-sizing: border-box;
    background: #f4f5f8;
    border-radius: 7px;
    margin-bottom: 30px;
}
.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption{
    box-sizing: border-box;
}
.dark{
    background: #222429;
}
.serv-list .current_page_item a{
    background: #fff;
    border-radius: 7px;
}
.serv-list h4{
    margin-bottom: 2px;
    font: 24px var(--font1)
}
.dark h4{
    color: #fff;
}
.serv-list li{display: block;}
.serv-list ul.menu{display: block;}
.serv-list a{
    line-height: 48px;
    display: block;
    padding: 0px 20px;
    margin-left: -20px;
    color: #686a6f;
    box-sizing: border-box;
    position: relative;
    transition: all 0.4s ease-in-out;
    margin-bottom: 5px;
}
.serv-list a::before{
    content: "";
    display: inline-block;
    width: 2px;
    background: var(--color1);
    height: 0px;
    left: 0px;
    top: 12px;
    position: absolute;
    transition: all 0.4s ease-in-out;
}
.serv-list .current_page_item a::before{
    height: 25px;
}
.serv-list a::after{
    content: "\F0054";
    font-family: "Material Design Icons";
    position: absolute;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    right: 20px;
    line-height: 48px;
    color: var(--color2);
}
.serv-list a:hover{
    border-radius: 7px;
    background: #fff;
    color: #000;
}
.serv-list a:hover::before{
    display: inline-block;
    height: 25px;
    transition: all 0.4s ease-in-out;
}
.serv-list p{
    font: 14px var(--font2);
    line-height: 29px;
    color: #666;
    margin: 20px 0px;
}
.serv-list.dark a{
    color: #fff;
    background: transparent;
    padding: 0px;
    margin-left: 0px;
    font: 20px var(--font1);
}
.serv-list.dark a::before, .serv-list.dark a::after{
    display: none !important;
}

.serv-list.dark a i{
    color: var(--color2);
}
form br{
	display: none;
}



.faq{
    background: url(https://seoconsultingperu.com/productos/abbasac/wp-content/uploads/2026/03/Gemini_Generated_Image_czw64wczw64wczw6.webp);
    background-repeat: no-repeat;
	background-size: cover;
    padding: 40px 0px;
}
.faq h4{
	font: 23px var(--font1);
}
.faq h3{
	font: 46px var(--font1);
}
.main-container{
	padding-top: 40px;
}
h4.btn-item{
	display: block;
	padding: 18px 20px;
    box-sizing: border-box;
    background: #ebebeb;
    font-family: var(--font1);
    font-size: 16px !important;
    display: flex;
    line-height: 33px;
    border: 1px solid #d5dde7;
    justify-content: space-between;
    font-weight: 400;
    margin-bottom: 0px !important;
    color: #000;
}
.btn-item::after{
    content: '+';
    color: #fff;
    background: #011327;
    line-height: 23px;
    padding: 5px 6px;
    font-weight: 300;
    font-size: 24px;
    box-sizing: border-box;
    width: 27px;
    text-align: center;
}
.btn-item.active::after{
    content: '-';
    color: #fff;
}
.item-content{
	overflow: hidden;
	max-height: 0px;
	transition: all 0.3s;
}
.item-content p{
	font-size: 16px;
	font-weight: 400;
	color: var(--color1);
    padding: 14px 20px;
}
.item{
	margin-bottom: 14px;
}
.active + .item-content{
	max-height: 10em;
	transition: all 0.3s;
}
.btn-item.active{
	transition: all 0.3s;
	color: var(--color1);
}
.txt-faq{
    width: 800px; max-width: 100%;
	max-width: 100%; padding: 50px;box-sizing: border-box; background: #ffffff94; box-shadow: 0px 0px 20px 0px #fff
}

.owl-marcas img{ width: auto !important; text-align: center;}
.mark{text-align: center; display: flex; align-items: center; justify-content: center;}

.is_Product article{position: relative;overflow: hidden; box-shadow: 0px 0px 10px 0px #ccc; border-radius: 20px; background: #fff;}
.thumb-isProd{width: 100%; height: 250px; display: flex; justify-content: center; align-items: center;}
.thumb-isProd img{height: 100%; min-width: 100%;}
.is_Product h2{font-size: 18px;padding: 5px 8px; color: var(--color3); height: 56px; align-items: center; justify-content: center; display: flex}
.txt-prod{border-radius: 20px; position: relative; margin-top: -20px; text-align: center; padding: 20px; box-sizing: border-box; background: #fff}
.txt-prod p{padding: 10px 0px;}.thumb-prod{height: 300px; overflow: hidden;}

.is_Product{padding: 70px 0px; background: url(https://seoconsultingperu.com/productos/abbasac/wp-content/uploads/2026/03/fondo.jpg); background-size: cover; background-position: center;}
.is_Product a.btn{padding: 10px 25px; background: var(--color3); display: inline-block; margin-top: 25px;}

.soluciones{background: url(img/fondo1.jpeg); background-size:  cover; padding: 80px 0px; position: relative; background-attachment: fixed;}
.soluciones::before{content: ""; display: block; background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

.soluciones .title h3{ color: #fff; }
.soluciones .container{position: relative; z-index: 4;}
.soluciones .grid_2{padding-top: 40px;}
.soluciones .grid_2 li{list-style: none;}
.soluciones .grid_2 li a{color: #fff; font-weight: 700; font-size: 20px; padding: 15px 0px; display: inline-block;}
.soluciones .grid_2 li a i{color: var(--color1); margin-right: 10px; display: inline-block;}


.faq-section {

        padding: 60px 20px;
        font-family: 'Segoe UI', sans-serif;
    }
    .faq-header {
       
        margin: 0 auto 30px;
    }
    .faq-header h2 {
        color: #0a1f33;
        font-size: 2rem;
        margin-bottom: 10px;
    }
    .faq-header p {
        color: #666;
    }
    .faq-container {
        
        margin: 0 auto;
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .faq-item {
        border-bottom: 1px solid #eee;
    }
    .faq-item:last-child {
        border-bottom: none;
    }
    .faq-question {
        width: 100%;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        font-size: 1.1rem;
        font-weight: 500;
        color: #333;
        transition: color 0.3s;
    }
    .faq-question:hover {
        color: #d4a373;
    }
    .faq-icon {
        color: #d4a373;
        font-size: 1.4rem;
    }
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        padding: 0 20px;
    }
    .faq-answer p {
        padding-bottom: 20px;
        color: #555;
        line-height: 1.6;
        margin: 0;
    }
    .faq-item.active .faq-answer {
        max-height: 200px;
    }
    .faq-item.active .faq-icon {
        transform: rotate(45deg);
    }



@media only screen and (max-width: 1180px){
    .container{
        width: 900px;
    }
}
@media only screen and (max-width: 930px){
    .container{
        width: 700px;
    }
    .cabecera .btn{
        display: none;
    }
    .formulario .row-center{
        display: block;
    }
    .grid_4 {
        display: grid;
        grid-template-columns: repeat(2, 3fr);
        grid-column-gap: 7px;
        grid-row-gap: 7px;
    }
    .grid_3{
        display: grid;
        grid-template-columns: repeat(1, 3fr);
    }
    .nosotros .row-center, .marcas .row-center, .productos .row, .slide .row{
        display: block;
    }
    .brand.row-center{
        display: flex;
        width: 90%;
        margin: 0 auto;
    }
    .brand img{
        width: 33.3%;
    }
    .col-5{
        width: 100%;
    }
    .txt-slide h2{
        transform: translateX(0px);
        font-size: 50px;
        line-height: 50px;
    }
    .txt-nosotros{
        max-width: 100%;
        margin: 0 auto;
        padding:  50px  0px;
    }
    .title-marca{
        width: 100%;
        text-align: center;
        padding: 30px 2%;
        box-sizing: border-box;
    }
    .features article{
        margin: 10px auto;
    }
    
    .txt-nos{
        width: 100%;
        padding: 0px 10px 50px;
    }
    .page-serv .row{
        display: block
    }
    footer .row-center{        display: grid
        ;
                grid-template-columns: repeat(2, 3fr);}
                .f1,.f2,.f3{width: 100%;}
    .thumb-nos{
        margin: 0px;
        width: 100%;
    }.thumb-nos::after{display: none;}
}
@media only screen and (max-width: 710px){
    .container{
        width: 500px;
        max-width: 92%;
    }
    .page-serv aside{
        margin-left: 0px;
    }
    footer .row-center{        display: grid
        ;
                grid-template-columns: repeat(1, 3fr);}
    .services .row-center{
        display: block;
        text-align: center;
    }
    p.subtitle{
        max-width: 100%;
        margin: 0 auto;
    }
    .owl-stage{
        padding: 0px;
    }
    .cnt{
        padding: 50px 30px;
    }
    .formulario{
        box-sizing: border-box;
    }
    .box-contact{
        padding: 20px 0px;
        width: 100%;
    }
    .txt-process{
        margin: 10px 0px !important;
    }
    .process .grid_4{
        grid-row-gap: 0px
    }
    .box-form img{
        width: 100%;
    }
    .cnt h3.title{
        text-align: left;
		font-size: 29px;
    }
    .number::before, .number, .txt-process::before{
        display: none !important;
    }
    
    .nosotros{
        padding-bottom: 0px;
    }
    .grid_4 {
        grid-template-columns: repeat(1, 3fr);
    }
    .txt-nosotros h2, .productos h3, h3.title{
        font-size: 25px;
    }
    .contactos, .contactos .container{
        padding: 0px;
        max-width: 100% !important; 
        background: var(--color1);
    }
    .formulario{
        padding: 15px;
        width: 100%;
    }
    footer .grid_3, .cnt .row-center{
        display: block;
    }
    .cnt{
        text-align: center;
    }
    .cabecera img{
        height: 35px !important;
    }
    .txt-slide{
        padding: 50px 4% 50px;
       
    }
    .title-slide h1{
        font-size: 35px;
    }
    .title-slide{
        top: 21%;
        background: rgb(0,0,0,0.45);
    }
    .title-slide h1 strong{
        text-shadow: 1px 1px 0px #fff;
    }
    .slide img{
        height: 300px;
    }
    .title-slide p::before, .title-slide p::after{
        display: none;
    }
    .cnt h3{
        max-width: 100%;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .entry .row-center, .entry span{
        display: block;
        width: 100%;
        text-align: center;
    }
    .marg{
        padding: 15px 0px;
    }
    .cabecera{
        padding: 15px 0px;
    }
    #icoNav_movil{
        display: block;
        cursor: pointer;
    }
    .nav-menu{
        width: 70%;
        height: 100vh;
        position: fixed;
        background: var(--color1);
        left: -150%;
        top: 0;
        padding: 50px 2%;
        box-sizing: border-box;
		z-index: 1200;
        transition: all 0.4s ease-in-out;
    }
    .nav-menu li{
        display: block;
        width: 100%;
    }
    .nav-menu li a{
        color: #fff;
        padding: 10px 15px;
        display: block;
    }
    .draw h2{
        font-size: 25px;
    }
	.cabecera .menu li ul.sub-menu{
		padding: 0px;
		width: 100%;
		grid-template-columns: repeat(2, 3fr); grid-column-gap: 5px; grid-row-gap: 5px;
		position: static;
	}
	.nav-menu{
		overflow: auto;
	}
	ul.sub-menu li a span{
		transform: translatey(0px);
		font-size: 14px;
	}
	ul.sub-menu li a{
		margin: 0px !important;
	}
	.cabecera ul.sub-menu img{
		height: auto !important;
		display: block;
	}
	.cabecera .menu li:hover > ul.sub-menu{
		padding: 10px;
	}
    .banner{
       height: 370px;
    }
    .banner img{
        height: 100%;
        width: auto !important;
    }
    .servicios{
        padding: 30px 0px;
    }
    .cnt h3{
        font-size: 15px;
    }
    .formulario{padding: 0px !important;}
    .formulario .container{width: 100% !important; padding: 10px 0% !important; max-width: 100% !important;}
    .box-form{width: 100%;padding: 10px 5%; box-sizing: border-box;}
    .boxs{display: block;}.box-f .row-center{justify-content: start;}
    .txt-contact{width: 100%;}
    .features{margin-top: 0px;}
	.contenido, .tarjetas, .tarjeta{display: block !important; width: 100% !important; box-sizing: border-box;}
	.tarjetas{margin-top: 30px;}.contact .row-center{display: block;}.cnt, .loc{width: 100%; text-align: left;}
	.cnt .default{margin-left: 0px;} .contact .btn{width: 100%; box-sizing: border-box; text-align: center;}
	.menu{display: block}
	.mega-menu-content{display: block; position: static;  width: 100%; padding: 10px; background: #fff; max-height: 0px;}
	.mega-menu-item:hover .mega-menu-content {max-height: inherit; display: block; }

}