@charset "utf-8";

.animacion {
  will-change: transform, opacity;
}

/* =========================
   FONTS
========================= */
@font-face{font-family:"font1";src:url("/fuentes/font1.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font2";src:url("/fuentes/font2.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font3";src:url("/fuentes/font3.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font4";src:url("/fuentes/font4.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font5";src:url("/fuentes/font5.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font6";src:url("/fuentes/font6.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font7";src:url("/fuentes/font7.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font8";src:url("/fuentes/font8.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font9";src:url("/fuentes/font9.ttf") format("truetype");font-display:swap;}

/* =========================
   VARIABLES
========================= */
:root{
  --negro:#000;
  --blanco:#fff;
  --amarillo:#ffc010;
  --gris:#666;
  --gris-claro:#ccc;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;

  --shadow-sm:0 4px 10px rgba(0,0,0,.15);
  --shadow-md:0 8px 18px rgba(0,0,0,.25);

  --t:.25s ease;

  --text-sm: clamp(14px,1vw,18px);
  --text: clamp(15px,1.3vw,20px);
  --text-lg: clamp(18px,2vw,28px);
  --h3: clamp(24px,3vw,42px);
  --h2: clamp(40px,5vw,96px);
  --hero: clamp(40px,5.5vw,160px);
}

/* =========================
   TIPOGRAFÍA
========================= */
h1{font-family:font7}
h2{font-family:font6}
h3{font-family:font5}
p,li{font-family:font3}
h2 a{color:inherit;text-decoration:none}
section h2{font-size: clamp(30px, 3vw, 76px);}
section p{font-size: clamp(15px, 1.1vw, 20px); letter-spacing: 0.1vw;}
#servicios header{text-align:center;}
#servicios header p{max-width: 900px; margin: 2% auto 0;}
.div30 ul{font-size: clamp(15px, 1.2vw, 20px);line-height: 1.7;}
.div33 ul{font-size: var(--text-sm);line-height: 3; padding-left: 0%;}
.div50 ul{font-size: var(--text);line-height: 0.5; padding-left: 0%;}
.div100planes h3{font-size:var(--text-lg); color: #fff;}
.div100planes h4{font-size:var(--text-lg); color: #fff;}
.div15planes p{background-color: #10a7ff; color: #fff; margin: 0% 20% 0% 20%; text-align: center; padding: 5%; border-radius: 10px;}
.planesprof h4{font-size:var(--text-lg); color: #db5e5e;}

/* =========================
   GRID FLOAT LEGACY
========================= */
[class^="div"]{float:left}

.div100{width:100%;padding: 0%;}
.div80{width:78%;padding:1%; color: #ccc;}
.div70{width:68%;padding:1%;text-align: left;}
.div60{width:52%;padding:4%}
.div50{width:48%;margin:1%;}
.div50servicios{width:40%;padding:5%;text-align:center}
.div40{width:38%;padding:1%;text-align:center}
.div33{width:25%;padding:2%; background: #000; margin: 2%; border-radius:var(--radius-md);color:#eaeaea;box-shadow: var(--shadow-md);}
.div30{width:28%;padding:1%;background:#000;border-radius:var(--radius-md);color:#eaeaea;box-shadow: var(--shadow-md);}
.div20{width:19%;padding:.5%;text-align:center}
.div15planes {
	display: inline-block;  
	width: 16%;
	padding: 1.5%;
	background-image: url(/img/fondotarjeta.png);
	border-radius: 10px;
	text-align: left;
	margin-left: 4.5%;
	transition: box-shadow 1s ease; /* animación suave */
	margin-bottom: 5%;
  text-decoration: none;
}
.div15planes:hover {
	box-shadow: 0 8px 15px rgba(0, 0, 0, 1); /* sombra al pasar el mouse */
}
#divsomos{
  background-image:url(/img/fondosomos.webp);
  padding:1% 4% 10% 4%;
  max-height: 550px;
}
#divsomos h3{
font-family: font1;
line-height:1.6;
}

/* =========================
   BASE
========================= */
html{scroll-behavior:smooth}

body{
  margin:0;
  overflow-x:hidden;
  min-height:600px;
  box-shadow:-5px 0 15px #666;
  font-family:font3;
}

/* clearfix */
main::after,.section::after,#pie::after{
  content:"";display:block;clear:both;
}

/* =========================
   VISIBILIDAD
========================= */
.vistah{display:block}
.vistav{display:none}



/* =========================
   SEO OCULTO
========================= */
.seo-info{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}



/* =========================
   MENU
========================= */

#menu a{
  position:relative;
  display:inline-block;   /* CLAVE para centrar el subrayado */
  font-family:font3;
  font-size:var(--text-sm);
  color:#ffc010;
  text-decoration:none;

}

#menu a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;

  width:100%;
  height:2px;
  background:currentColor;

  transform:translateX(-50%) scaleX(0);
  transform-origin:center;

  transition:transform var(--t);
}

#menu a:hover{
  letter-spacing:.05em;
}

#menu a:hover::after{
  transform:translateX(-50%) scaleX(1);
}

#menu h1{
  font-size:var(--text);
  font-family:font5;
  margin-left:7%;
}



/* =========================
   servicios
========================= */

.bloque-agencia{
padding:80px 10%;
background:#000;
display:flex;
flex-direction:column;
gap:40px;
}

/* GRID */

.grid-2,
.grid-3,
.grid-4{
display:grid;
gap:30px;
}

.grid-2{
grid-template-columns:1fr 1fr;
}

.grid-3{
grid-template-columns:1fr 1fr 1fr;
}

.grid-4{
grid-template-columns:1fr 1fr 1fr 1fr;
}

/* MODULOS */

.modulo{
background:white;
padding:40px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:.3s;
}

.modulo:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.full{
text-align:center;
}

/* SERVICIOS */

.servicio{
text-align:center;
}

.icono{
font-size:42px;
margin-bottom:15px;
}



/* ===== PRUEBA SOCIAL ===== */

.estrellas{
color:#ffc400;
font-size:18px;
margin-bottom:10px;
letter-spacing:3px;
}

.cta-social{
display:inline-block;
margin: auto;
background:#10a7ff;
color:#fff;
padding:14px 28px;
border-radius:8px;
font-weight:600;
text-decoration:none;
transition:.3s;
font-family: font1;
}

.cta-social:hover{
transform:scale(1.05);
}

.prueba-social{
    width:100%;
    background:#000;
    padding:80px 20px;
    text-align:center;
    color:#fff;
}

.prueba-social .contenedor{
    max-width:1200px;
    margin:auto;
}

.prueba-social h2{
    font-size:clamp(28px,4vw,42px);
    margin-bottom:10px;
}

.prueba-social .subtitulo{
    color:#bdbdbd;
    margin-bottom:50px;
    font-size:clamp(16px,2vw,18px);
}

/* ===== STATS ===== */

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:60px;
}

.stat{
    background:#111;
    padding:30px;
    border-radius:12px;
    border:1px solid #1f1f1f;
}

.stat span{
    font-size:clamp(28px,4vw,40px);
    font-weight:700;
    color:#ffc400;
    display:block;
}

.stat p{
    margin-top:10px;
    color:#ccc;
}

/* ===== videos youtube ===== */
.video-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
}

.video-grid iframe{
width:100%;
aspect-ratio:9/16;
border-radius:12px;
border:none;
box-shadow:0 10px 25px rgba(0,0,0,.25);
}


/* ===== TESTIMONIOS ===== */

.testimonios{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.card-testimonio{
    background:#222222be;
    padding:30px;
    border-radius:14px;
    border:1px solid #333;
    transition:.3s;
}

.card-testimonio:hover{
    transform:translateY(-6px);
    border-color:#ffc400;
}

.card-testimonio p{
    font-size:16px;
    line-height:1.6;
    color:#e5e5e5;
}

.card-testimonio h4{
    margin-top:20px;
    color:#ffc400;
    font-weight:600;
}

/* ===== RESPONSIVE ===== */

@media(max-width:900px){

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

    .testimonios{
        grid-template-columns:1fr;
    }
}

@media(max-width:500px){

    .stats{
        grid-template-columns:1fr;
    }

}





/* MINI */

.mini{
text-align:center;
padding:25px;
}

/* BOTON */

.boton-cta{
display:inline-block;
margin-top:20px;
padding:14px 30px;
background:#ffc400;
color:#000;
text-decoration:none;
border-radius:8px;
font-weight:bold;
transition:.3s;
font-family: font3;
}

.boton-cta:hover{
background:#10a7ff;
}

/* RESPONSIVE */

@media (max-width:1000px){

.grid-4{
grid-template-columns:1fr 1fr;
}

}

@media (max-width:800px){

.grid-2,
.grid-3,
.grid-4{
grid-template-columns:1fr;
}

}






/* =========================
   BOTONES
========================= */
.btn{
  display:inline-block;
  border:0;
  border-radius:var(--radius-sm);
  font-family:font1;
  font-size:var(--text-sm);
  padding:14px 22px;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:transform var(--t), box-shadow var(--t);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn-dark{background:#000;color:var(--amarillo)}
.btn-yellow{background:var(--amarillo);color:#000}

.boton_consultar{
  background:#000;
  color:var(--amarillo);
  padding:1.5%;
  border-radius:10px;
  font-family:font5;
  font-size:var(--text);
  margin-left:3%;
  float:left;
  text-decoration:none;
}

.boton_servicios,
.boton_servicios:link,
.boton_servicios:visited,
.boton_servicios:hover,
.boton_servicios:active{
  background:#000;
  color:var(--amarillo);
  padding:3.5%;
  border-radius:10px;
  font-family:font5;
  font-size:var(--text);
  display:block;
  width:fit-content;
  margin:auto;
  text-decoration:none !important;
}

/* =========================
   FORMULARIOS
========================= */
input,textarea{
  width:60%;
  margin:8px;
  padding:20px;
  border:0;
  border-radius:10px;
  font-family:font3;
  font-size:var(--text);
  color:#666;
  font-weight:bolder;
}

button{
  background:#ffc010;
  color:#fff;
  padding:4%;
  border:0;
  border-radius:1px;
  font-family:font1;
  font-size:var(--text);
}

#boton_enviar{
  background:#2C99FF;
  width:160px;
  height:65px;
  border-radius:20px;
  color:#fff;
  font-size:20px;
  font-family:font2;
}

/* =========================
   GRILLA PLANES
========================= */

.hero-texto{
padding-left:5%;
padding-right:5%;
text-align: center;
margin-bottom: 5%;
color: #fff;
}

/* SECCION PRECIOS */

.pricing{
  position:relative;
  padding:50px 10%;
  background:#f6f8fb;
  font-family:Arial;
  overflow:hidden;
}


.titulo{
  text-align:center;
  font-size:38px;
  margin-bottom:10px;
}


/* GRID */

.pricing-grid{
  width:100%;
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding:5% 20px;
  box-sizing:border-box;
}

/* PLAN */

.plan{
  background:white;
  border-radius:12px;
  box-shadow:0 15px 40px rgba(0, 0, 0, 0.479);
  display:flex;
  flex-direction:column;
  text-align:center;
  transition:.3s;
  position:relative;
}

.plan:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 60px rgba(0,0,0,0.15);
}

.plan-header{
  padding:35px 20px;
  border-bottom:1px solid #eee;
}

.plan h3{
  font-size:24px;
  margin-bottom:10px;
}

.price{
  font-size:50px;
  font-weight:bold;
}

.cuotas{
  font-size:14px;
  color:#666;
}

/* FEATURES */

.features{
  list-style:none;
  padding:0;
  margin:0;
  flex-grow:1;
}

.features li{
  padding:14px;
  border-bottom:1px solid #eee;
  font-size:15px;
}

.ok::before{
  content:"✔ ";
  color:#2e72cc;
  font-weight:bold;
}

.no{
  color:#d8d8d8;
}

.no::before{
  content:"✖ ";
}

/* BOTON */

.btn{
  margin:25px;
  padding:14px;
  border-radius:8px;
  background:#111;
  color:white;
  text-decoration:none;
  font-weight:bold;
  transition:.2s;
}

.btn:hover{
  background:#000;
}

.destacado{
  background:#2e7df6;
}

.destacado:hover{
  background:#1f65d6;
}

/* PLAN DESTACADO */

.popular{
  border:3px solid #2e7df6;
  transform:scale(1.05);
}

.recomendado{
  position:absolute;
  top:-25px;
  left:50%;
  transform:translateX(-50%);
  background:#2e7df6;
  color:white;
  padding:15px 15px;
  font-size:15px;
  border-radius:10px;
  font-weight:bold;
}


/* RESPONSIVE */

@media(max-width:900px){

  .pricing-grid{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:600px){

  .pricing-grid{
    grid-template-columns:1fr;
  }

  .popular{
    transform:none;
  }

}



/* =========================
   HERO / BANNERS
========================= */
#banner_formulario{
  background-image:url("/img/agencia-diseno-web-h.png");
  background-size:cover;
  background-attachment:fixed;
  background-position:center 0%;
  min-height:840px;
  text-align:left;
}

#banner_formulario h1{
  color:#fff;
  font-size:var(--hero);
  font-family:font7;
  letter-spacing:2px;
  margin:1% 10% 0 3%;
  line-height:120%;
  text-shadow:-3px 3px 10px #000;
}

#banner_formulario h2{
  clear:both;
  margin-left:3%;
  font-size:var(--text);
  font-family:font2;
  margin-top: 8%;
  color: #fff;
}

#banner_formulario p{
  font-size:var(--text-sm);
  font-family:font1;
  margin-left:3%;
  margin-right:30%;
}

/* banners variantes */
#banner_formulario.banner-diseno{background-image:url("/img/agencia-diseno-web-h.webp")}
#banner_formulario.banner-ads{background-image:url("/img/agencia-posicionamiento-google-ads.webp")}
#banner_formulario.banner-prepagas{background-image:url("/img/diseno-web-prepagas-salud.png")}
#banner_formulario.banner-turismo{background-image:url("/img/diseno-web-turismo.png")}
#banner_formulario.banner-arquitectura{background-image:url("/img/diseno-web-arquitectura.png")}
#banner_formulario.banner-empresa{background-image:url("/img/diseno-web-empresa.png")}
#banner_formulario.banner-escuela{background-image:url("/img/diseno-web-escuela.png")}
#banner_formulario.banner-contador{background-image:url("/img/diseno-web-contador.png")}
#banner_formulario.banner-abogado{background-image:url("/img/diseno-web-abogado.png")}
#banner_formulario.banner-fotografo{background-image:url("/img/diseno-web-fotografo.png")}
#banner_formulario.banner-medico{background-image:url("/img/diseno-web-medico.png")}
#banner_formulario.banner-odontologo{background-image:url("/img/diseno-web-odontologo.png")}
#banner_formulario.banner-producto{background-image:url("/img/diseno-web-producto.png")}
#banner_formulario.banner-psicologo{background-image:url("/img/diseno-web-psicologo.png")}
#banner_formulario.banner-servicio{background-image:url("/img/diseno-web-servicio.png")}
#banner_formulario.banner-traductor{background-image:url("/img/diseno-web-traductor.png")}


/* =========================
   elimina imagenes de fondo
========================= */

@media (max-width:768px){

#banner_formulario[class*="banner-"]{
background-image:none;
background-color: #000;
}

}



/* =========================
   FOOTER
========================= */

#pie{
padding:10px 0%;
background:#000;
}

/* COLUMNAS */

#pie section{
padding:20px 25px;
background:transparent;
}

/* TITULOS */

#pie h2{
color:#fff;
font-size:18px;
margin-top:25px;
margin-bottom:10px;
font-weight:600;
}

/* TEXTO */

#pie h3,
#pie p,
#pie li{
color:#bdbdbd;
font-size:15px;
line-height:1.7;
}

/* LISTAS */

#pie ul{
padding-left:18px;
margin-top:10px;
}

#pie li{
margin-bottom:6px;
}

/* LINKS */

#pie a{
color:#bdbdbd;
text-decoration:none;
transition:all .25s ease;
}

#pie a:hover{
color:#fff;
}

/* ICONOS */

#pie .material-symbols-outlined{
vertical-align:middle;
margin-right:6px;
color:#ffbb00;
}

/* FORMULARIO */

#pie input,
#pie textarea{
  width:90%;
  padding:18px;
  margin-top:8px;
  border-radius:6px;
  border:none;
  background:#fff;
  color:#666;
  font-size:15px;
}

#pie textarea{
  resize:none;
}

/* BOTON */

#pie button{
  margin-top:15px;
  padding:12px 26px;
  background:#005ad1;
  border:none;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:all .3s ease;
}

#pie button:hover{
  background:#fff;
  color:#000;
}

/* COPYRIGHT */

footer .div100 h3{
  font-family: font2;
color:#999;
font-size:14px;
}

/* MOBILE */

@media (max-width:900px){

.div33{
width:80%;
margin-bottom:40px;
}

}




/* =========================
   ICONOS
========================= */
.material-symbols-outlined{
  font-size:var(--h2)!important;
}

.planes-img{
  width:85%;
  transform: translateX(12%);
}




/* =========================
   ANIMACION TEXTO
========================= */

.animacion{
    opacity:0;
    transform: translatey(20px);
    transition: all 4s cubic-bezier(.22,1,.36,1);
}

.animacion.active{
    opacity:1;
    transform: translatey(0);
}

.animacion,
.animacionvert,
.animacionizq{
will-change: transform, opacity;
}

/* modificadores */
.lenta{
    transition-duration: 4s;
}

.superlenta{
    transition-duration: 7s;
}



/* =========================
   MOBILE
========================= */
@media(max-width:767px){

  body{background-attachment:scroll}

   [class^="div"]{
    float:none;
  }

  #banner_formulario,
  #precio{background-attachment:scroll}

  #banner_formulario{
  min-height:740px;
  }

  .vistah{display:none}
  .vistav{display:block}

  .div50{
    width:90%;
    padding:4%;
    margin:1% auto;
  }

  .div80,.div60,.div40,.div33,.div30,.div20,{
    width:90%;
    padding:5%;
    margin:1% auto;
  }

  .div70{
    width:100%;
    padding:0%;
    margin:10% auto;
  }
  .div15planes {
    width:80%;
    padding:3%;
    background-image:url(/img/fondotarjeta.png);
    border-radius:10px;
    text-align:left;
    transition: box-shadow 1s ease;
    float:none !important;
    display:block;
    margin:10% auto 0;
    text-decoration:none;
    box-sizing:border-box;
  }
  #divsomos{
  padding:0% 0% 0% 3%;
  float: left;
  max-height: 1500px;
  
  }
  .tarjetas{
    width:98%;
    padding:1%;
    min-height:250px;
    background-image:url(/img/fondotarjeta.png);
    float:none !important;
    display:block;
    margin:10% auto;
    box-sizing:border-box;
  }
  
  /* =========================
    TIPOGRAFIAS MOBILE
  ========================= */
  #banner_formulario{
  padding-top:15%;
  }
  #banner_formulario h1{
  margin-top:0;
  }
  #banner_formulario .planes-img {
    margin-left: -8%;
  }
  .h4-inmo{ 
	  color:#fff;
  }
  #tarjetas h4{
    font-size:var(--h3);
    color:var(--amarillo);
    font-family:font6;
  }
  #tarjetas h5{
    font-size:var(--radius-lg);
    color:#fff;
    font-family:font1;
    margin-top:-5%;
    letter-spacing: 0.1vw;
    line-height: 150%;
  }
  #planesprof h4{
    font-size:var(--hero);
    color:var(--blanco);
    font-family:font6;
    text-align: center;
    margin: 0% 0% 10%;
  }
  .div15planes p{
    background-color: #10a7ff; 
    color: #fff; 
    margin: 0% 30% 0% 30%; 
    text-align: center; 
    padding: 5%; 
    border-radius: 10px;
    margin-bottom: 10%;
  }

  input,textarea{width:80%;box-shadow:var(--shadow-sm)}

  .material-symbols-outlined{
    font-size:clamp(42px,12vw,90px)!important;
    margin-top: 5%;
  }

  .boton_consultar{
    padding:5%;
    width:50%;
    margin-left: 2%;
    float:none;
    display:block;
    text-align:center;
    font-size:x-large;
  }

  .planes-img{width:60%; position:relative; padding-left:3%;}

  /* ===== FIX SUBRAYADO BOTON SERVICIOS ===== */
  a.boton_servicios::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  }

  /* ===== SERVICIOS ESTILOS ===== */

 #servicios{
padding:10%;
background:#f8fafc;
text-align:center;
width: 80%;
}







/* TITULO */

.encabezado_servicios h2{
font-size:clamp(32px,3vw,42px);
margin-bottom:20px;
}

.encabezado_servicios p{
max-width:720px;
margin:auto;
font-size:18px;
line-height:1.7;
color:#555;
margin-bottom:70px;
}

.icono_titulo{
font-size:42px;
color:#ffbb00;
margin-bottom:10px;
}



/* PLANESPROF */

#planesprof{
padding:8% 8%;
background:#f8fafc;
text-align:center;
}

/* TITULO */

#planesprof h2{
font-size:clamp(30px,3vw,40px);
margin-bottom:60px;
}

/* GRID */

.div100planes{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
max-width:1200px;
margin:auto;
}

/* TARJETAS */

.div15planes{

background:#fff;

border-radius:16px;

padding:30px 20px;

text-align:center;

text-decoration:none;

box-shadow:
0 12px 30px rgba(0,0,0,.08);

transition:all .35s ease;

position:relative;

overflow:hidden;

}

/* HOVER */

.div15planes:hover{

transform:translateY(-10px);

box-shadow:
0 25px 50px rgba(0,0,0,.18);

}

/* IMAGEN */

.div15planes img{

width:80px;
height:80px;

object-fit:contain;

margin-bottom:20px;

transition:transform .3s ease;

}

.div15planes:hover img{
transform:scale(1.1);
}

/* TEXTO */

.div15planes h3{
font-size:14px;
color:#777;
margin-bottom:5px;
}

.div15planes h4{
font-size:20px;
margin-bottom:10px;
}

/* BOTON TEXTO */

.div15planes p{

color:#ffbb00;

font-weight:600;

margin-top:10px;

}

/* CTA */

#planesprof .div100 a{

display:inline-block;

padding:16px 36px;

background:#ffbb00;

color:#000;

font-weight:600;

border-radius:30px;

text-decoration:none;

transition:all .3s ease;

}

#planesprof .div100 a:hover{

background:#000;

color:#fff;

transform:translateY(-3px);

}

/* MOBILE */

@media (max-width:900px){

.div100planes{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:500px){

.div100planes{
grid-template-columns:1fr;
}

}



/* TARJETAS SERVICIO */

.div50servicios{

width:45%;
margin:2%;

padding:50px 40px;

background:#fff;

border-radius:18px;

box-shadow:
0 15px 40px rgba(0,0,0,.08);

display:inline-block;
vertical-align:top;

transition:all .35s ease;

position:relative;

}


/* HOVER */

.div50servicios:hover{

transform:translateY(-12px);

box-shadow:
0 30px 60px rgba(0,0,0,.18);

}


/* LINEA INFERIOR ANIMADA */

.div50servicios::after{

content:"";

position:absolute;

bottom:0;
left:0;

width:0;
height:4px;

background:#ffbb00;

transition:width .35s ease;

}

.div50servicios:hover::after{

width:100%;

}


/* ICONOS */

.icono_servicio{

font-size:42px;
color:#ffbb00;

display:block;

margin-bottom:15px;

}


/* TITULOS SERVICIOS */

.div50servicios h2{

font-size:26px;

margin-bottom:25px;

line-height:1.3;

}


/* IMAGENES */

.div50servicios img{

width:60%;

margin:25px auto;

display:block;

transition:transform .35s ease;

}

.div50servicios:hover img{

transform:scale(1.08);

}


/* TEXTO */

.div50servicios p{

font-size:16px;

line-height:1.7;

color:#666;

margin-bottom:35px;

}


/* BOTON */

.boton_servicio_container{

text-align:center;

}

.boton_servicios{

display:inline-block;

padding:14px 34px;

background:#ffbb00;

color:#000;

font-weight:600;

border-radius:30px;

text-decoration:none;

transition:all .3s ease;

}

.boton_servicios:hover{

background:#000;

color:#fff;

transform:translateY(-3px);

}


/* MOBILE */

@media (max-width:768px){

.div50servicios{
width:80%;
margin-bottom:40px;

}
.vistav{
  width:100%;
  height:auto;
  display:block;
}

}



}