/*Reset/básico*/
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body { font-family: "Inter",sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; 
   line-height: 1.5; background-color: #ffffff; color: #e6e6e6; }

/* Container */
.container { max-width: 1280px; margin: 0 auto; padding: 24px; }

/*Variables globales*/
:root{
  --e-global-color-primary:#6EC1E4;
  --e-global-color-secondary:#54595F;
  --e-global-color-text:#7A7A7A;
  --e-global-color-accent:#61CE70;
  --e-global-color-dea41e4:#FFFFFF;
  --container-max-width:1280px;
}

/*Cabecera / Nav*/
.site-header {position: fixed;top: 0; left: 0; width: 100%; background: #000000; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.04); animation: navDown 0.8s ease-out forwards; transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease; z-index: 1000; }
/*para cuando bajas en la pagina*/
.site-header.scrolled{ background: rgba(0, 0, 0, 0.6);  /* color semi-transparente */ backdrop-filter: blur(10px);     /* efecto difuminado */ box-shadow: 0 2px 15px rgba(0,0,0,0.4);
}

.main-nav {margin-left: 95px;}
.site-header .site-nav { display:flex; align-items:center; gap:24px; justify-content:space-around; right: -40px;}
.brand img { height: 40px; width: auto; display:block; }
.main-nav .menu { list-style:none; display:flex; gap:18px; align-items:center; }
.main-nav .menu li a { color: var(--e-global-color-dea41e4); text-decoration:none; padding:8px 10px; display:inline-block; transition: color 0.3s ease; white-space: nowrap;}
.main-nav .menu li.has-sub { position:relative; }
.main-nav .submenu { position:absolute; left:0; top:100%; display:none; background:#0b1220; padding:10px; border-radius:6px; list-style: none; min-width: 150px; ;white-space: normal;}
/*.main-nav .menu li.has-sub:hover .submenu { display:block;}*/
.has-sub-res.open .submenu-res {display: block !important;}

/*abrir con el click*/
.has-sub.open .submenu {display: block !important;}
/*efecto color al pasar el raton*/
.main-nav .menu li a:hover {color: #FFB300;}
/*.main-nav .menu li.has-sub:hover .submenu { display:block;}*/




/* CTA button */
.nav-button { display:inline-block; padding:10px 16px; background:#FFB300; color:#000; border-radius:6px; text-decoration:none; font-weight:600; /*transicion entre los colores*/ transition: background-color 0.4s ease, color 0.3s ease; margin: 5px; }

.nav-button:hover {background:#0b0bdb; color:#ffffff;}

/*funcion animacion down de la nav*/
@keyframes navDown {
   0% {
     transform: translateY(-100%);
     opacity: 0;
   }
   100% {
     transform: translateY(0);
     opacity: 1;
   }
 }

/*responsive nav*/
.main-nav-res .menu-res { list-style:none; display:none; gap:18px; align-items:center; }
.main-nav-res .menu-res li a { color: var(--e-global-color-dea41e4); text-decoration:none; padding:8px 10px; display:inline-block; transition: color 0.3s ease;}
.main-nav-res .menu-res li.has-sub { position:relative; }
.main-nav-res .submenu-res { position:absolute; left:0; top:100%; display:none; background:#0b1220; padding:10px; border-radius:6px; list-style: none; min-width: 150px; ;white-space: normal;}
.main-nav-res .menu-res li.has-sub-res:hover .submenu-res { display:block; left: -35px; }


@media screen and (max-width: 1710px){
    .site-nav {flex-direction: flex; justify-content: center;}

    .site-header .site-nav{display:flex; align-items:center; gap:24px; justify-content:space-around;}
    /*.site-header .site-nav:not(:first-child){align-self: flex-end;} dejar el boton hambur al final*/
    .main-nav .menu {display: flex;} /*oculto los elemntos*/
  
    .main-nav .menu {display: row;}
    .main-nav .menu { display: row;width: 100%;}
    .main-nav .menu li {position: relative;}
    .main-nav .submenu {display: none; flex-direction: column; background: #0b1220; padding: 10px; border-radius: 6px; margin-top: 8px;}
    .main-nav .submenu li a {display: block; padding: 8px 10px; color: #fff;}

    .nav-button {display: inline-block;}
    /*.brand img {height: 20px;}*/
}
  
@media screen and (max-width: 1024px){
    .site-nav {flex-direction: flex; justify-content: center;}

    .site-header .site-nav{flex-direction: row; align-items: center; justify-content: center; margin: 0;  gap: unset;}
    /*.site-header .site-nav:not(:first-child){align-self: flex-end;} dejar el boton hambur al final*/
    .main-nav .menu {display: none;} /*oculto los elemntos*/
  
    .main-nav-res .menu-res {display: block;}
    .main-nav-res .menu-res { display: block;width: 100%;}
    .main-nav-res .menu-res li {position: relative;}
    .main-nav-res .submenu-res {display: none; flex-direction: column; background: #0b1220; padding: 10px; border-radius: 6px; margin-top: 8px;}
    .main-nav-res .submenu-res li a {display: block; padding: 8px 10px; color: #fff;}

    .nav-button {display: none;}
    /*.brand img {height: 20px;}*/
}

@media screen and (max-width: 900px){
    .site-nav {flex-direction: flex; justify-content: space-between;}

    .site-header .site-nav{flex-direction: row; align-items: center; justify-content: center; margin: 0;  gap: unset;}
    .main-nav .menu {display: none;} /*oculto los elemntos*/
    
    .main-nav-res .menu-res {display: block;}
    .main-nav-res .menu-res { display: block;width: 100%;}
    .main-nav-res .menu-res li {position: relative;}
    .main-nav-res .submenu-res {display: none; flex-direction: column; background: #0b1220; padding: 10px; border-radius: 6px; margin-top: 8px; left: -100px;}
    .main-nav-res .submenu-res li a {display: block; padding: 8px 10px; color: #fff;}
    .main-nav-res .menu-res li.has-sub-res:hover .submenu-res {left: -100px;}

    .nav-button {display: none;}
    /*.brand img {height: 20px;}*/
}


/*Hero*/
.hero { padding-top: 180px; /*margin-top: 120px;*/  background-blend-mode: normal;
  background: linear-gradient(200deg, #ff0000, #990000cc, #630000dd, #ab0000);
  background-size: 400% 400%;
  animation: gradient 20s ease infinite;
  border-end-end-radius: 150px;
  /*height: 100vh;*/
  /*padding-bottom: 30px;*/
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.hero .e-con-inner { display:flex; flex-direction: row; gap:40px; align-items:center; justify-content:space-between; } /*justificamo flex en columnas para que al añadir cosas no se junten en la misma linea*/
.hero-h1 > * { padding-bottom: 15px};
.hero-left { flex:1; max-width:65%; }
.hero-right { flex:1; text-align:center; justify-content: center; align-items: center;}
.hero-right img { max-width:100%; border-radius:12px; max-width: 920px; height: auto; object-fit: cover; }
.hero-actions {display:flex; justify-content: center; align-items: center;}
.hero-button {display:inline-block; padding: 15px 45px; background:#FFB300; color:#000; border-radius:6px; text-decoration:none; font-weight:600; /*transicion entre los colores*/ transition: background-color 0.4s ease, color 0.3s ease;}
.hero-button:hover {background:#0b0bdb; color:#ffffff;}
.hero-h1 {display: block; width: 100%; text-align: center; white-space: nowrap;}
.elementor-element {display: flex;flex-direction: column; align-content: center; justify-content: center; align-items: center;}
.elementor-element > p {padding-bottom: 40px;}

/*Headings (from elementor-kit styles) */
.elementor-heading-title { color: var(--e-global-color-dea41e4); font-weight:700; margin-bottom:12px; }
.hero h1 { font-size: clamp(36px, 6vw, 100px); line-height:1; color:#fff; font-family:"Inter",sans-serif; font-weight:900; }
.hero h2 { font-size: clamp(20px, 2.5vw, 36px); color:#FFB300; margin-bottom:16px; }

/* Text blocks */
.container p { color: #e6e6e6; margin-bottom:14px; font-size: large; text-align: center;}


@media screen and (max-width: 1024px){
  .hero-h1 {width: 100%; white-space: unset;}
  .hero h1 {font-size: 56px;}
  .hero-left {margin-top: -40px;}
  .hero-actions {margin-top: 40px;}
}


@media screen and (max-width: 900px){
  .hero-h1 {width: 100%; white-space: unset;}
  .hero h1 {font-size: 56px;}
  .hero-left {margin-top: -40px;}
  .hero-actions {margin-top: 40px;}
}

@media screen and (max-width: 438px){
  .hero-h1 {width: 100%; white-space: unset;}
  .hero h1 {font-size: 36px;}
  .hero-left {margin-top: -40px;}
  .hero-actions {margin-top: 40px;}
}

/*carrusel*/
.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 20px 0;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  flex: 0 0 auto;
  min-width: 300px;
  margin-right: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  text-align: center;
  max-width: 30%;
}

.carousel-item:first-child {margin-left: 65px;}
.carousel-item > h3 > i {color: rgb(255, 87, 87); font-size: larger;}
.carousel-item > h3 {color: #1f3653; font-size: 25px; margin-bottom: 20px;}
.carousel-item > p {color: rgb(84, 89, 95); text-align: center; font-size: 20px; font-weight: 400;}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  background: rgba(0,0,0,0.1);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 2;
}

.prev { left: 10px; }
.next { right: 10px; }

@media(min-width: 768px) {
  .carousel-item { min-width: 45%; }
}
@media(min-width: 1024px) {
  .carousel-item { min-width: 30%; }
}


/*intro*/
.intro_agora {display: flex; align-items: center; justify-content: center; align-content: center; gap: 15px; margin-top: 60px;}
.intro1 {width: 600px; text-align: center;}
.intro1 h2, #mas_agora_h2 {font-size: 52px; color: #1f3653; background: white;}
.intro1 h3 {color: #54595f; font-size: 29px; margin-bottom: 25px;}
.intro1 button {background: #ff4747; color: white; font-size: 16px; font-weight: 700; font-family: "Inter", sans-serif; width: 200px; height: 50px; margin-bottom: 15px; border-radius: 5px; border: none; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.185); transition: background 0.3s ease;}
.intro1 button:hover {background: #d50000;}
.intro2 {width: 650px;}
.intro2 img {width: -webkit-fill-available; border-radius: 12px;}


/*agora ayuda*/
.agora-ayuda{display: flex; background: black; flex-direction: column; align-items: center; gap: 30px; margin-top: 40px; padding-bottom: 60px;}
.agora-ayuda > h2 {font-size: 50px; color: #ff4c4c; font-weight: 800; margin-top: 50px;}

/*caracteristicas agora*/
.agora-ayuda .parent {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px; gap: 75px; align-content: center; justify-items: center; align-items: baseline; justify-content: center;
margin-bottom: 100px;
}

.div1 { grid-area: 1 / 2 / 2 / 5;; display: flex; flex-direction: column; align-items: center; justify-content: center; align-content: center; margin-left: 100px;}
.div2 { grid-area: 1 / 5 / 2 / 7; }
.div3 { grid-area: 1 / 7 / 2 / 9; }
.div6 { grid-area: 3 / 5 / 4 / 7; }
.div7 { grid-area: 3 / 7 / 4 / 9; }
.div4 { grid-area: 2 / 5 / 3 / 7; }
.div5 { grid-area: 2 / 7 / 3 / 9; }

.div1 h3{ font-size: 51px; margin-bottom: 20px;} 
.div2 h3 , .div3 h3, .div4 h3 , .div5 h3 , .div6 h3 , .div7 h3 { font-size: 20px; text-align: center; margin-bottom: 20px;} .div2 i {color: #ff5757; font-size: larger;}
.div3 i {color: #ff5757; font-size: larger;}
.div4 i {color: #ff5757; font-size: larger;}
.div5 i {color: #ff5757; font-size: larger;}
.div6 i {color: #ff5757; font-size: larger;}
.div7 i {color: #ff5757; font-size: larger;}

/*agora back*/
.agora-back .parent2 {
display: flex;
flex-direction: row;
align-items: flex-start;
    justify-content: center;
    align-content: center;
margin-bottom: 70px;
background: black;
padding: 30px;
    gap: 30px;
}

.divz {display: flex; flex-direction: column;  justify-content: center; align-items: center; background: black;}
.divz > p {text-align: center; font-size: 20px;}
.divx { width: 50%; padding: 20px;}
.divc { width: 50%; padding: 20px}
.divv { width: 50%; padding: 20px}

.divz h3{ font-size: 51px; margin-bottom: 20px; text-align: center;} .divz p {width: 70%;}
.divx h3 , .divc h3, .divv h3 { font-size: 25px; text-align: center; margin-bottom: 20px;} .div2 i {color: #ff5757; font-size: larger;}
.divx p , .divc p, .divv p {text-align: center; font-size: 20px; font-weight: 400;}
.divx i {color: #ff5757; font-size: larger;}
.divc i {color: #ff5757; font-size: larger;}
.divv i {color: #ff5757; font-size: larger;}

/*Formacion*/
.formacion h2 {font-size: 50px; color: #1f3653; font-weight: 800;}
.formacion > * {margin-bottom: 25px;}
.formacion p {text-align: center; font-size: 20px; color: rgb(84, 89, 95);}

.formacion .form-video iframe {width: 900px; height: 480px; border-radius: 12px; border: 19px solid white; margin-bottom: -270px; box-shadow: 0 10px 25px rgba(0,0,0,0.13)}
.formacion {display: flex; flex-direction: column;    align-content: center;justify-content: center; align-items: center;}
.formacion button {background: #ff4747; color: white; font-size: 16px; font-weight: 700; font-family: "Inter", sans-serif; width: 200px; height: 50px; margin-bottom: 15px; border-radius: 5px; border: none; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.185); transition: background 0.3s ease;}
.formacion button:hover {background: #d50000;}

/*verifactu*/
.verifactu {margin-top: 100px;}

.card {display: flex; gap: 40px; align-items: flex-startss;}
.card-default { padding: 1.25rem; text-align: center;display: flex; justify-content: flex-start;  flex-direction: column; align-items: center; background-color: #EBF0FF !important; border-radius: 2rem; width: 395px;}
.card-default > h3 {font-size: 30px; color: #1f3653; margin-bottom: 30px;}
#no {white-space: nowrap;}
.card-default > p {font-weight: 400;}
#pre {text-align: left;  white-space: pre;}
.verifactu img {width: 400px;}


/*empresas*/
.empresas {background: white; display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; padding-top: 370px;}
.empresas h2 {text-align: center; font-size: 51px; color: #020b1a; font-weight: 800; line-height: 1.3; margin-bottom: 60px}
#exito {text-align: center; font-size: 61px; color: #1f3653; font-weight: 700; line-height: 1.3; margin-bottom: unset;}


/*Grid iconos*/
  .parent4 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  }
  .div1z { grid-area: 1 / 3 / 3 / 4; max-width: 85%; margin-bottom: 60px;}
  .div2z { grid-area: 1 / 4 / 3 / 5; max-width: 85%;}
  .div3z { grid-area: 1 / 4 / 3 / 5; max-width: 85%;}
  .div4z { grid-area: 3 / 3 / 4 / 4; max-width: 85%;}
  .div5z { grid-area: 3 / 4 / 4 / 5; max-width: 85%;}
  .div6z { grid-area: 3 / 4 / 4 / 5; max-width: 85%;}

  .div1z img { max-width: 500px;}
  .div2z img { max-width: 500px;}
  .div3z img { max-width: 500px;}
  .div4z img { max-width: 95%;}
  .div5z img { max-width: 95%; height: 90%;}
  .div6z img {max-width: 95%;}

#agora-red{font-size: 61px; background:linear-gradient(200deg, #ff0000, #dd2222cc, #870a0add, #db0000); background-size: 400% 400%; animation: gradient 8s ease infinite; margin-top: -25px; /*lo clipeo con el texto*/ color: transparent; background-clip: text;}


/*pq agora*/
.pq-agora {display: flex; background: white; align-items: center; justify-content: center; padding-bottom: 80px; padding-top: 15px; padding-top: 70px;}
.pq-agora h2 { font-size: 51px; color: #1f3653; background: white;}

.parent3 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
background: white;
}

/*.div11 { grid-area: 1 / 2 / 2 / 4; }*/
.div22 { grid-area: 1 / 3 / 3 / 6; }
.div33 { grid-area: 2 / 3 / 4 / 6; }
.div44 { grid-area: 3 / 3 / 5 / 6; }

.div55 { grid-area: 1 / 2 / 4 / 3; }

.div22 h3 , .div33 h3 , .div44 h3 { font-size: 25px; color: #1f3653;}
.div22 i , .div33 i , .div44 i {color: #d10000;}
.div22 p , .div33 p, .div44 p {color: #54595f; font-size: 20px; width: 420px; margin-bottom: 220px;}
.div22 {padding-top: 30px; } .div33 {padding-top: 12px;}


/*CTA Final*/
.final-fin { display: flex; justify-content: center;}
.final {padding: 30px; width: 65%; display: flex; align-items: center; justify-content: center; align-content: center; gap: 15px; margin-top: 60px; margin-bottom: 60px; background: #a63030;
background: linear-gradient(289deg, rgba(166, 48, 48, 1) 0%, rgba(199, 102, 87, 1) 54%, rgba(242, 151, 111, 1) 100%); border-radius: 40px;}
.final-item {width: 600px; text-align: center;}
.final-item h2 {font-size: 52px; color: #1f3653; line-height: normal;}
.final-item h3 {color: #54595f; font-size: 29px; margin-bottom: 25px;}
.final-but button {background: #ff4747; color: white; font-size: 16px; font-weight: 700; font-family: "Inter", sans-serif; width: 200px; height: 50px; margin-bottom: 15px; border-radius: 5px; border: none; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.185); transition: background 0.3s ease;}
.final-but button:hover {background: #d50000;}

/*mas cosas de agora*/
.mas_agora {display: flex; gap: 50px; ;}
#mas_agora_h2 {text-align: center; margin-top: 170px}

.column > h2 {color: #1f3653; font-size: 25px; margin-bottom: 20px;}
.column > h2 > i {color: rgb(255, 87, 87); font-size: larger;}
.column > p , #sim_p {color: rgb(84, 89, 95); text-align: justify; font-size: 20px; font-weight: 400; margin-bottom: 45px;}
#sim_p {text-align: center;}

/*simulacion tpv*/
.prue-tpv {display: flex; align-items: center; justify-content: center;}
.prue-tpv-intro {display: flex; flex-direction: column; flex-direction: column; align-items: center; justify-content: center; align-content: center; flex-wrap: nowrap;}
.prue-tpv button {background: #ff4747; color: white; font-size: 16px; font-weight: 700; font-family: "Inter", sans-serif; width: 200px; height: 50px; margin-bottom: 15px; border-radius: 5px; border: none; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.185); transition: background 0.3s ease;}
.prue-tpv button:hover {background: #d50000;}
.simulador_h2 {margin-top: -150px;; font-size: 52px; color: #1f3653; text-align: center;}

/*Footer*/
.site-footer { background:#0a1220; color:#cfcfcf; padding:40px 0; margin-top:40px; padding-bottom: 0;}
.footer-widgets { display:flex; gap:20px; align-items:center; }
.footer-widgets .widget { flex:1; }
#footer-h {margin-left: -18px ;}
.site-info { display:flex; flex-direction: row-reverse; align-items:center; justify-content:space-between; margin-top:18px; align-items: flex-start;}
.widget > ul { list-style: square;}
.widget > ul > li::marker {color: #FFB300;}
.widget > ul > li > a {text-decoration: none; color: white; transition: color 0.3s ease-in-out;}
.widget > ul > li > a:hover{color: #5898F9;}
.widget > h5 {font-size: 25px; font-weight: 700; padding-bottom: 10px; color: white;} 
.widget > hr {border-bottom: none; border-top: 3px solid #FFB300; max-width: 40px; margin-bottom: 12px; margin-top: -12px; margin-left: -18px;}

.webkit { display: flex; justify-content: center; align-items: center; width: 100%; background-color: white;  padding-bottom: 20px;  padding-top: 20px;}
.webkit > img { width: 60%;}

/*Social icons*/
.elementor-social-icons-wrapper a { color: #fff; margin-right:8px; text-decoration:none; }
.fab {font-size: 30px; color: white; transition: color 0.2s ease-in-out, transform 0.3s ease-in; transform: translateY(0%);}

.fab:hover { color: #5898F9; transform: translateY(-60%);}


/*responsive todo*/
@media (max-width: 1709px) {
  .footer-widgets { flex-direction:row; }
  .webkit { width: 100%;}
  .widget:nth-child(2){margin-left: 50px;}
  
  .hero h1{font-size: 130px;}
  .hero-h1 p {white-space: normal;}

  .div22 p, .div33 p, .div44 p {width: 100%; margin-bottom: 30px;}
  .div22{grid-area: 1 / 2 / 3 / 3;}
  .div33{grid-area: 2 / 2 / 3 / 3;}
  .div44{grid-area: 3 / 2 / 5 / 3;}
  .parent3 .div55 img {width: 90%;}

  /* .final{margin-top: -320px; } */
/*   .verifactu {margin-top: unset;} */
  .simulador_h2 {margin-top: unset;}

  .parent3 {display: flex; flex-direction: column; align-items: center}
  .div22, .div44 {width: 790px;}

}


@media (max-width: 1024px) {
  .footer-widgets { flex-direction:row; gap: 40px;}
  .webkit { width: 100%;}  
  .webkit img { width: -webkit-fill-available;}

  .widget:nth-child(2){margin-left: 30px;}
  .widget:nth-child(2){margin-left: 50px;}
  
  .footer-widgets { flex-direction:column; }
  .widget:nth-child(2){margin-left: -50px;}
  .widget:nth-child(3){margin-left: -33px;}
  .widget:nth-child(4){margin-left: -66px;}
  .widget:first-child {display: flex; flex-direction: column; align-items: center;}
  .widget:first-child > img {max-width: 65%;}
  .hero-h1 h1 {padding: 1px;}
  .hero .e-con-inner {width: -webkit-fill-available;}
  .hero .e-con-inner {flex-wrap: wrap;}

      /*intro agora*/
  .intro_agora {flex-direction: column;}
  .intro1 > h2 {font-size: 42px;}

  /*Verifactu*/
  .card{flex-direction: column;}
  .intro1 {width: 100%;}
  .intro2 {width: 95%;}
  .verifactu {margin-top: unset;}

  body{text-align: center;}
  .hero h1{font-size: 99px;}
  .agora-ayuda {padding: 20px;}
  .agora-ayuda .parent {display: flex; flex-direction: column; align-items: flex-start;}
  .agora-ayuda h2 {font-size: 33px}
  .div1 {margin-left: unset;}
  
  .agora-back .parent2 {display: flex; flex-direction: column; align-items: center;}
  .parent3 {display: flex; flex-direction: column;}

  .parent4 {display: flex; flex-direction: column; align-items: center; gap:50px;}

  .div22 p, .div33 p, .div44 p {width: 100%; margin-bottom: 10px;}
  .div22, .div33, .div44 {width: unset;}
  .divx , .divc , .divv {margin-top: 40px; margin-bottom: 40px;}
  .div1z {margin-bottom: unset;}
  #exito{font-size: 55px;}
  .divx p , .divc p , .divv p , .divz p {padding: unset; text-align: justify;}
  .formacion {padding: 20px;}

  .div1z img { width: 90%;}
  .div2z img { width: 90%;}
  .div3z img { width: 90%;}


  .pq-agora h2 {font-size: 36px; padding-top: 120px;}
  .pq-agora {padding-bottom: 1px; margin-top: -80px;}

  .div55 img {width: 350px;}
  .formacion .form-video iframe {width: 635px; height: 380px;}

  .mas_agora {flex-direction: column;}
  #mas_agora_h2 {margin-top: 65px;}
  .column > p {margin-bottom: 40px;}
  .column > p:last-child {margin-bottom: unset;}

  .final {margin-top: unset; padding: 25px; flex-direction: column; width: 90%; margin-top: 35px}
  .final .final-item{width: 100%;}
  .final-item > h2 {font-size: 35px;}
  .final-item p {width: 100%;}  

}


@media (max-width: 900px) {
  .footer-widgets { flex-direction:column; }
  .webkit { width: 100%;}
  .webkit img { width: -webkit-fill-available;}

  .widget:nth-child(2){margin-left: -50px;}
  .widget:nth-child(3){margin-left: -33px;}
  .widget:nth-child(4){margin-left: -66px;}
  .widget:first-child {display: flex; flex-direction: column; align-items: center;}
  .widget:first-child > img {max-width: 65%;}
  .hero-h1 h1 {padding: 1px;}
  .hero .e-con-inner {width: -webkit-fill-available;}
  .hero .e-con-inner {flex-wrap: wrap;}

    /*intro agora*/
  .intro_agora {flex-direction: column;}
  .intro1 > h2 {font-size: 42px;}

  /*Verifactu*/
  .card{flex-direction: column;}
  .intro1 {width: 100%;}
  .intro2 {width: 95%;}
  .verifactu {margin-top: unset;}

  body{text-align: center;}
  .hero h1{font-size: 99px;}
  .agora-ayuda {padding: 20px;}
  .agora-ayuda .parent {display: flex; flex-direction: column; align-items: flex-start;}
  .agora-ayuda h2 {font-size: 33px}
  .div1 {margin-left: unset;}
  
  .agora-back .parent2 {display: flex; flex-direction: column;}
  .parent3 {display: flex; flex-direction: column;}

  .parent4 {display: flex; flex-direction: column; align-items: center; gap:50px;}

  .div22 p, .div33 p, .div44 p {width: 100%; margin-bottom: 10px;}
  .div22, .div33, .div44 {width: unset;}
  .divx , .divc , .divv {margin-top: 20px; margin-bottom: 20px; width: 100%;}
  .div1z {margin-bottom: unset;}
  .divx p , .divc p , .divv p , .divz p {padding: unset; text-align: justify;}

  .div1z img { width: 90%;}
  .div2z img { width: 90%;}
  .div3z img { width: 90%;}

  .formacion {padding: 20px;}

  .pq-agora h2 {font-size: 36px; padding-top: 100px;}
  .pq-agora {padding-bottom: 1px; margin-top: -80px;}

  .div55 img {width: 350px;}
  .formacion .form-video iframe {width: 400px; height: 380px;}

  .mas_agora {flex-direction: column;}
  #mas_agora_h2 {margin-top: 65px;}
    .column > p {margin-bottom: 40px;}
  .column > p:last-child {margin-bottom: unset;}

  .final {padding: 25px; flex-direction: column; width: 90%; margin-top: 35px}
  .final .final-item{width: 100%;}
  .final-item > h2 {font-size: 35px;}
  .final-item p {width: 100%;}

}

@media (max-width: 420px) {
  body{text-align: center;}
  .hero-h1 h1 {padding: 1px;}
  .hero h1{font-size: 75px;}
  .hero-h1 p {font-size: small;}
  .webkit img { width: -webkit-fill-available;}


  .hero .e-con-inner {width: -webkit-fill-available;}
  .hero .e-con-inner {flex-wrap: wrap;}

  /*intro agora*/
  .intro_agora {flex-direction: column;}
  .intro1 > h2 {font-size: 42px;}

  /*Verifactu*/
  .card{flex-direction: column;}
  .intro1 {width: 100%;}
  .intro2 {width: 95%;}
  .verifactu {margin-top: unset;}

  .agora-ayuda {padding: 20px;}
  .agora-ayuda .parent {display: flex; flex-direction: column; align-items: flex-start;}
  .agora-ayuda h2 {font-size: 33px}
  .div1 {margin-left: unset;}
  
  .agora-back .parent2 {display: flex; flex-direction: column;}
  .parent3 {display: flex; flex-direction: column;}

  .parent4 {display: flex; flex-direction: column; align-items: center; gap:50px; padding-top: 25px;}

  .div22 p, .div33 p, .div44 p {width: 100%; margin-bottom: 10px;}
  .div22, .div33, .div44 {width: unset;}
  .divx , .divc , .divv {margin-top: 20px; margin-bottom: 20px; width: 100%;}
  .divx p , .divc p , .divv p, .divz p {padding: unset; text-align: justify;}
  .div1z {margin-bottom: unset;}
  .formacion {padding: 20px;}

  .pq-agora h2 {font-size: 36px; padding-top: 120px;}
  .pq-agora {padding-bottom: 1px; margin-top: -80px;}

  .div55 img {width: 350px;}
  .formacion .form-video iframe {width: 320px; height: 380px;}

  .mas_agora {flex-direction: column; width: 90%;}
  #mas_agora_h2 {margin-top: 65px;}
  .column > p {margin-bottom: 40px;}
  .column > p:last-child {margin-bottom: unset;}

  .final {padding: 25px; flex-direction: column; margin-top: 35px};
  .final .final-item{width: 100%;}
  .final-item > h2 {font-size: 35px;}
  .final-item p {width: 100%;}
}