/*---------- Layout ----------*/
@font-face {font-family: Nexa-Heavy; src: url(font/Nexa-Heavy.ttf)}
@font-face {font-family: Nexa-ExtraLight; src: url(font/Nexa-ExtraLight.ttf)}

html {overflow-x: hidden;}

body {margin:0; padding:0; background:#FFF;
font: 1.2em/1.6em Nexa-ExtraLight, "Comic Sans MS", sans-serif; /*height: 200vh;*/ color:#000;}

#contenedor {width:100%; margin:0 auto; padding:0 auto}

#contenedor #cabecera {width:100%;}

#contenedor #cabecera #logo {width:40%; float:left; margin:0 auto;}

#contenedor #cabecera #menu {width:60%; float:right; margin:0 auto;}

#contenedor #cuerpo {width:100%; min-height:700px;}

#contenedor #cuerpo #espacio {width:100%; margin: 0 auto;}

#contenedor #cuerpo #espacio #principal {width:80%; margin: 0 auto;}

#contenedor #cuerpo #espacio #secundario {width:80%; margin: 0 auto;}

#contenedor #cuerpo #boxbody {width:80%; margin: 0 auto;}

#contenedor #cuerpo #boxbody #principal {width:50%; float:right; margin:0 auto;}

#contenedor #cuerpo #boxbody #secundario {width:50%; float:left; margin:0 auto;}

#contenedor #pie {width:100%; margin: 0 auto;}

#contenedor #pie #box {width:100%; height:200px; margin:0 auto; background:#000;}

#contenedor #pie #box #cliente {width:50%; height:220px; float:left; margin:0 auto;background:rgba(0, 0, 0,1)}

#contenedor #pie #box #horario {width:50%; height:220px; float:right; margin:0 auto;background:rgba(0, 0, 0,1)}


/*---------- Basico ----------*/

.clear {clear:both}

.center { text-align:center;}

#menum {display:none;}

#imagen-centrado {width:100%; margin:0 auto;} /*para principal y secundario*/

#imagen-centrado img {width:100%;}

#imagen-espacio { width:60%; margin:0 auto; cursor: pointer;} /*para las imagenes que esten directo en espacio*/

#imagen-espacio  img { width:100%; border-radius: 30px; box-shadow: 0px -0px 10px #000; transition: opacity 1s ease;}

#imagen-left {width:40%; float:left; margin: 2em; border-radius: 30px; box-shadow: 0px -0px 10px #000}

#red {color:#f00; font-family: Nexa-Heavy;}

a { color:#000; text-decoration:none; cursor: pointer;}

a:hover { color:#FF8000;}

p {text-align:justify; padding:0 0.5em}

h1 {font: 4.0rem Nexa-Heavy; text-align:center; padding:0 0.5em; color:#FF8000;}

h2 {font: 3.0rem Nexa-Heavy; text-align:center; padding:0 0.5em;}

h3 {font: 2.0rem Nexa-Heavy; text-align:center; padding:0 0.5em;}

iframe {margin: 1em auto; padding:0; width:100%;height:480px; 
		border:0; box-shadow: 0px -0px 10px #000;border-radius: 10px; overflow: hidden;}
		
input {font-size: 100%; border: 2px solid #FF8000; padding: 0.25em 0.5em; 
		border-radius: 10px 0 10px 0; font: 1.0em/1.4em Nexa-ExtraLight, "Comic Sans MS", sans-serif;}

input:hover {border-radius: 0px 10px 0px 10px;}

/*---------- Efectos de movimientos ----------*/

* {transition: all .5s ease;}

.oculto {opacity: 0;}

.escalado:hover{transform: scale(1.1);}

.rotacion:hover{transform:rotateZ (-5deg);}

.borde {border-radius: 10px; box-shadow: 0px -0px 10px #000;}

.caja {opacity: 0; transform: translateY(50px); transition: opacity 1s ease-out, transform 1s ease-out;}

.caja.visible {opacity: 1;transform: translateY(0);}

.aparecer_logo, .aparecer_menu, .aparecer_banner {opacity: 0; transform: translateY(20px); animation: aparecer 1s ease-out forwards; z-index:100;}

.aparecer_banner {animation-delay: 0.1s;}

.aparecer_logo {animation-delay: 0.75s;}

.aparecer_menu {animation-delay: 0.75s;}

@keyframes aparecer {
					from {opacity: 0;transform: translateY(20px);}
					to {opacity: 1;transform: translateY(0); z-index:100;}
					}


.aparecer-left { opacity: 0; transform: translateX(50px); transition: opacity 1s ease-out, transform 1s ease-out;}

.aparecer-right {opacity: 0; transform: translateX(-50px); transition: opacity 1s ease-out, transform 1.5s ease-out;}

.mostrar { opacity: 1; transform: translateX(0);}

.aparecer-escalado {opacity: 0; transform: scale(0.8); transition: opacity 1s ease-out, transform 1.5s ease-out;}

.escalar { opacity: 1; transform: scale(1);}

.aparecer-bajada {opacity: 0; transform: translateY(-50px); transition: opacity 1s ease, transform 1s ease;}

.bajada { opacity: 1; transform: translateY(0);}


/*---------- Cabecera ----------*/

#cabecera h1{text-align:center; margin:0 0.5em; padding:0.5em;}

#logo img {width:300px;}


/*---------- Menú ----------*/

#menu {font: 1.4rem/1.8rem Nexa-Heavy, "Comic Sans MS", sans-serif, "Ubuntu Mono";}

#menu ul {margin:0 ; list-style:none; position:absolute; top:1em;}

#menu ul li { float: left; padding: 0.25em 0.5em;}

#menu a:hover {color:#FFF; background:#FF8000; padding:0.25em 0.5em; box-shadow: 0px -0px 10px #000; border-radius: 5px;}

#menum {z-index:100; position:relative;}

.menu-icon span {
  margin:0.26em 0.23em;
  display: block;
  height: 6px;
  width: 80%;
  background: #000;
  border-radius: 5px;
  transition: all 0.4s ease;
}

/* Animación al abrir */
#menu-burger:checked + .menu-icon span:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px); background: #FFF;
}

#menu-burger:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}

#menu-burger:checked + .menu-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(10px, -10px);background: #FFF;
}

nav {text-align:center; font: 1.4rem/1.8rem Nexa-Heavy, "Comic Sans MS", sans-serif, "Ubuntu Mono";}

nav input {display: none;}

nav label { box-sizing: border-box; display: block; border: 3px solid black; border-radius: 5px;
			width: 50px; height: 50px; line-height: 40px;
			position:absolute; top: 1em; right:1em;}

nav ul {list-style:none; width:100%; background:rgba(0, 0, 0,0.75); max-height: 0; opacity: 0; overflow: hidden; 
		transition: max-height 1s ease, opacity 0.2s ease; position:absolute; top:3.05em;  left:-9.5%; z-index:100; }

nav ul li {margin:0 auto; padding:1em;}

nav ul li a {color: #FFF; width:100%;}

nav input:checked ~ ul {opacity: 1; max-height: 700px;}

nav input:checked ~ label {background: #000; color: #FFF; border: 3px solid #FF8000;}

nav label:hover{background: #FF8000; color: #FFF; cursor:pointer;}

nav li:hover {background:#FF8000;}

nav a:hover {color: #000;}

/*---------------Espacio-------------------*/

#centrar-lista {width:60%; margin: 0 auto; padding:0.25em}

ul.imagen-texto {margin:0; padding:0;}

.imagen-texto li {list-style:none; padding:0.5em ;margin: 0 auto;}

.imagen-texto p {font: 2.5rem Nexa-Heavy; text-align:none}

.imagen-texto img {width:100px; padding:1em; float:left;}

#img-banner { width:100%; margin: 0 auto;}

#img-banner img {width:100%;}

#banner-cambio {width:100%; margin:0 auto;}

#banner-cambio img {width:100%;}

.img-pc {display:block;}

.img-mobile {display:none;}

#pasos {width:23.5%; min-height:300px; float:left; margin:0 0 0 1.2%; padding:0.5em;
				box-sizing: border-box; background:#DDD; border-radius: 0 30px 0 30px; position:relative; border: 3px solid #FFF;}
				
#pasos:hover {border-radius: 30px 0 30px 0; background:#FFF; border: 3px solid #FF8000; box-shadow: 0px -0px 10px #000; transition: all .5s ease;}
				
#pasos img {width:30%; margin:0 auto; padding:o auto; right:0; left:0; position:absolute; top:20px;}
				
#pasos h1 {font: 2.5rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:120px;}

#pasos p {font: 2rem; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:100px;}

#contacto {width:25%; min-height:300px; float:left; margin:1em 0 2em 6%; padding:0.5em;
				box-sizing: border-box; background:#DDD; border-radius: 0 30px 0 30px; position:relative; border: 3px solid #FFF;}
				
#contacto:hover {border-radius: 30px 0 30px 0; background:#FFF; border: 3px solid #FF8000; box-shadow: 0px -0px 10px #000; transition: all .5s ease;}
				
#contacto img {width:25%; margin:0 auto; padding:o auto; right:0; left:0; position:absolute; top:20px;}
				
#contacto h1 {font: 2.5rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:120px;}

#contacto p {font: 2rem; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:100px;}

#ofertas1, #ofertas2, #ofertas-solo {width:33.3333%; margin:2em auto; float:left;}

#ofertas1 img, #ofertas2 img, #ofertas-solo img {width:100%;}

#ofertas-solo {cursor:pointer;}

#ofertas-solo img, #ofertas1 img, #ofertas2 img {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-out;
    opacity: 1;
    transform: scale(1);
}

.espacio-p {color:#000; font: 2.3rem Nexa-ExtraLight; padding: 1em 2.5em;}

#espacio #principal #mapa {width:80%;}

#espacio #secundario form {width:40%;}

.testimonios {margin:0 auto; width:60%; overflow: hidden; position: relative;}

.slider { display: flex; height: 100%; transition: transform 0.5s ease-in-out; }

.comentario {width: 100%;height: 100%; object-fit: cover; flex-shrink: 0; text-align:center; }

.comentario p {text-align:center; font: 2.0rem Nexa-ExtraLight;}

.atras, .adelante { position: absolute; top: 50%; z-index: 10;}

.atras { left: 0%; }

.adelante {right: 0%;}



/* Ícono flotante de WhatsApp */
    #wsp-icon {
  padding:0em;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #FF8000;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 1);
  z-index: 1000;
  transform: translateX(20px);
  transition: padding 0.3s ease, background-color 0.3s ease;
  opacity: 0;
  animation: asomar 1s ease-out forwards, bounce 1.5s 3;
  animation-delay: 2s;
}

	#wsp-icon img {width:40px; object-fit: contain; /* O 'cover' si prefieres */
  display: block;}

    #wsp-icon:hover {
      padding:0.08em;
    }
	 
	@keyframes asomar {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }	
	
	@keyframes bounce {
      0%, 100% { padding:0em; transition: padding 0.3s ease }
      50% { padding:0.08em; transition: padding 0.3s ease}
    }
	
    /* Formulario flotante */
    #formulario-wsp {
      position: fixed;
      bottom: 90px;
      right: 20px;
      background: white;
      padding: 1em;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.3);
      display: none;
      z-index: 1001;
      width: 260px;
      transform: scale(0.7);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #formulario-wsp.visible {
      display: block;
      transform: scale(1);
      opacity: 1;
    }

    #formulario-wsp input,
    #formulario-wsp textarea {
      width: 100%;
      margin-bottom: 0.5em;
      padding: 0.5em;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    #formulario-wsp button {
      width: 100%;
      padding: 0.6em;
      background: #25D366;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #formulario-wsp .cerrar {
      text-align: right;
      font-size: 18px;
      cursor: pointer;
      color: #888;
    }

    #formulario-wsp .cerrar:hover {
      color: #000;
    }


/*---------- principal----------*/

#principal #mapa {width:100%; margin:0 auto;}

#principal #requisitos h3 {text-align:justify; margin:0.5em 0 0 0; padding:0;}

#principal #requisitos p {text-align:justify; margin:0 0 0.5em 0;}

#principal #requisitos table {width: 100%; border-collapse: collapse;}

#principal #requisitos table td {margin:0; padding:0;}

td:nth-child(1) {width: 30%;}

#principal #requisitos table img {max-width: 10%; min-width: 80px; margin:0 0 0 3em} 

/*---------- secundario ---------*/

#secundario #mensaje {width:100%; margin:0 auto;}

form {margin:0 auto; padding: 1em;}

form p {margin:0; padding: 1em;}

button {background: rgba(255,255,255,1);border: 2px solid #000; padding:0.5em 1em; border-radius: 0 10px 0 10px; transition: all 0.5s ease; cursor:han; cursor:pointer;}

button:hover {border-radius: 10px 0 10px 0; color:#FFF; background:#000; padding:0.5em 1em; border: 2px solid #FF8000;}

/*------------ Pie de página ----------*/

#pie #copyright {font: 1.0rem Nexa-ExtraLight; margin:0.5em auto; padding:0; color:#000; }

#pie #cliente {font: 1.10rem Nexa-ExtraLight; margin:0 auto; padding:0; color:#FFF; text-align:center;}

#pie #cliente a:hover {color: #000;}

#cliente a img {width:50px;margin:0; padding:0.5em; vertical-align: middle;}

#cliente a img:hover {transform: scale(1.2)}

 /* Modal del QR */
    #qr-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1001;
    }

    #qr-modal.mirar {
      display: flex;
    }

    #qr-contenido {
      background: white;
      padding: 1em;
      border-radius: 10px;
      text-align: center;
      width: 80%;
      max-width: 500px;
	  height: 500px;
      animation: revelar 0.4s ease;
    }

    @keyframes revelar {
      from {
        transform: scale(0.5);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

#pie #cliente #qr-contenido img {
      width: 60%;
      max-width: 350px;
      height: auto;
    }

    .cerrar-qr {
      font-size: 18px;
      color: #888;
      text-align: right;
      cursor: pointer;
      margin-bottom: 0.5em;
    }

    .cerrar-qr:hover {
      color: #000;
    }


#pie #horario {font: 1.10rem Nexa-ExtraLight; margin:0 auto; padding:0; color:#FFF; }

#pie a:hover{color:#FFF}

/*------------media mobile 320 -----------*/


@media only screen and (min-width : 319px) and (max-width : 459px)

{

/*------VISTA GENETAL-----*/

body {overflow-x: hidden;}

#espacio #secundario #mensaje .texto-normal {text-align:justify;}

#menu {display:none;}

#centrar-lista {width:100%; margin: 0 auto; padding:0}

.imagen-texto li {list-style:none; padding:0.5em ;margin:0;}

.imagen-texto p {font: 1.2rem Nexa-Heavy;}

.imagen-texto img {width:50px; padding:0.5em; float:left;}

#img-banner img {width:100%; height:400px; object-fit: cover;}

.img-pc {display:none;}

.img-mobile {display:block;}

#imagen-espacio { width:100%; margin:0 auto;}

#imagen-left {width:100%; float:left; margin: 1em 0;}

#espacio #autofinanciamiento {font: 2.4rem Nexa-Heavy;}

#espacio h1 {font: 3rem Nexa-Heavy;}

#espacio h2 {font: 2.5rem Nexa-Heavy;}

#principal h1 {font: 3rem Nexa-Heavy;}

#principal h2 {font: 2.5rem Nexa-Heavy;}

#secundario h1 {font: 3rem Nexa-Heavy;}

#secundario h2 {font: 2.5rem Nexa-Heavy;}

.espacio-p {font: 1.4rem Nexa-ExtraLight; padding: 0.25em 1.0em;}

#espacio #principal {width:100%;}

#espacio #principal #mapa {width:100%;}

#contenedor #cuerpo #espacio #secundario {width:95%}

#espacio #secundario form {width:100%; padding: 0.5em;}

.testimonios {margin:0 auto; width:90%; overflow: hidden; position: relative;}

.slider { display: flex; height: 100%; transition: transform 0.5s ease-in-out; }

.comentario {width: 100%;height: 100%; object-fit: cover; flex-shrink: 0; text-align:center; }

.comentario p {text-align:center; font: 1.4rem Nexa-ExtraLight;} 

.atras, .adelante { position: absolute; top: 50%; z-index: 10;}

.atras { left: 0%; }

.adelante {right: 0%;}

#principal #requisitos h3 {font: 1.2rem Nexa-Heavy;}

#principal #requisitos p {font: 1.0rem Nexa-ExtraLight;}

td:nth-child(1) {width: 25%;}

#principal #requisitos table img {max-width: 10%; min-width: 70px; margin:0 0 0 0.5em}

#pasos {width:46.5%; min-height:200px; margin:0.5em 0 0 0.5em ; padding:0.5em; float:left;}

#pasos img {width:30%; margin:0 auto; padding:o auto; right:0; left:0; position:absolute; top:10px;}
				
#pasos h1 {font: 1.6rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:50px;}

#pasos p {font: 0.9rem Nexa-ExtraLight; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:40px;}

#contacto {width:80%; min-height:300px; margin:1em 0 1em 10% ; padding:0.5em; float:left;}

#contacto img {width:30%; margin:0 auto; padding:o auto; right:0; left:0; position:absolute; top:40px;}

#contacto h1 {font: 1.6rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:140px;}

#contacto p {font: 0.9rem Nexa-ExtraLight; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:140px;}

#ofertas-solo {width:100%; margin:2em auto 0 auto; float:left; padding:0;}

#ofertas1, #ofertas2 {width:50%; margin:0 auto 2em auto; float:left; padding:0;}

form p button { margin-left:70%}

#contenedor #cabecera #menum {display:block;}

#contenedor #cuerpo #boxbody {width:100%; margin: 0 auto;}

#contenedor #cuerpo #boxbody #principal {width:100%; float:right; margin:0 auto;}

#contenedor #cuerpo #boxbody #secundario {width:100%; float:left; margin:0 auto;}

#contenedor #pie #box #cliente {width:100%; float:left; margin:0 auto; font: 1.0em/1.5em; background:rgba(0, 0, 0,1)}

#contenedor #pie #box #horario {width:100%; float:right; margin:0 auto; font: 1.0em/1.5em; background:rgba(0, 0, 0,1)}

#pie #copyright{font: 0.7rem/0.9rem Nexa-ExtraLight, "Comic Sans MS", sans-serif, "Ubuntu Mono"}

}


/*------------media mobile 460 -----------*/


@media only screen and (min-width : 460px) and (max-width : 699px)

{

/*------VISTA GENETAL-----*/ 

#autofinanciamiento {font: 2.8rem Nexa-Heavy;}

body {overflow-x: hidden;}

#menu {display:none;}

#menum {display:block;}

#img-banner img {width:100%; height:400px; object-fit: cover;}

.img-pc {display:none;}

.img-mobile {display:block;}

#imagen-espacio { width:100%; margin:0 auto;}

#imagen-left {width:100%; float:left; margin: 1em 0;}

#centrar-lista {width:100%; margin: 0 auto; padding:0}

.imagen-texto li {list-style:none; padding:0.5em ;margin:0;}

.imagen-texto p {font: 1.4rem Nexa-Heavy;}

.imagen-texto img {width:70px; padding:0.5em; float:left;}

form p button { margin-left:80%}

#espacio h1 {font: 3rem Nexa-Heavy;}

#espacio h2 {font: 2.5rem Nexa-Heavy;}

#principal h1 {font: 3rem Nexa-Heavy;}

#principal h2 {font: 2.5rem Nexa-Heavy;}

#secundario h1 {font: 3rem Nexa-Heavy;}

#secundario h2 {font: 2.5rem Nexa-Heavy;}

.espacio-p {font: 1.5rem Nexa-ExtraLight; padding: 0.5em 1.5em;}

#espacio #principal {width:100%;}

#espacio #principal #mapa {width:100%;}

#contenedor #cuerpo #espacio #secundario {width:90%}

#espacio #secundario form {width:85%; padding: 0.5em;}


#pasos {width:46.5%; min-height:200px; margin:0.5em 0 0 0.5em ; padding:0.5em; float:left;}

#pasos img {width:25%; margin:0 auto; padding:o auto; right:0; left:0; position:absolute; top:10px;}
				
#pasos h1 {font: 1.6rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:60px;}

#pasos p {font: 0.9rem Nexa-ExtraLight; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:45px;}

#contacto {width:60%; min-height:300px; margin:1em 0 1em 20% ; padding:0.5em; float:left;}

#contacto img {width:30%; margin:0 auto; padding:o auto; right:0; left:0; position:absolute; top:40px;}

#contacto h1 {font: 1.6rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:140px;}

#contacto p {font: 0.9rem Nexa-ExtraLight; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:140px;}

#ofertas-solo {width:100%; margin:2em auto 0 auto; float:left; padding:0;}

#ofertas1, #ofertas2 {width:50%; margin:0 auto 2em auto; float:left; padding:0;}

#principal #requisitos h3 {font: 1.2rem Nexa-Heavy;}

#principal #requisitos p {font: 1.0rem Nexa-ExtraLight;}

td:nth-child(1) {width: 25%;}

#principal #requisitos table img {max-width: 10%; min-width: 70px; margin:0 0 0 2em}

#contenedor #cuerpo #boxbody {width:100%; margin: 0 auto;}

#contenedor #cuerpo #boxbody #principal {width:100%; float:right; margin:0 auto;}

#contenedor #cuerpo #boxbody #secundario {width:100%; float:left; margin:0 auto;}

#contenedor #pie #box {width:100%; margin:0 auto; background:#000;}

#contenedor #pie #box #cliente {width:100%; float:left; margin:0 auto; font: 1.0em/1.5em; background:rgba(0, 0, 0,1)}

#contenedor #pie #box #horario {width:100%; float:right; margin:0 auto; font: 1.0em/1.5em; background:rgba(0, 0, 0,1)}

#pie #copyright {font: 0.8rem/1rem Nexa-ExtraLight, "Comic Sans MS", sans-serif, "Ubuntu Mono"}

}

/*------------media mobile 670 -----------*/


@media only screen and (min-width : 700px) and (max-width : 899px)

{

/*------VISTA GENETAL-----*/ 

#img-banner img {width:100%; height:400px; object-fit: cover;}

#imagen-espacio { width:80%; margin:0 auto;}

#imagen-left {width:60%; float:left; margin: 1em;}

#menu ul {margin: 0; list-style:none; position:absolute; top:0.2em;}

#espacio h1 {font: 3rem Nexa-Heavy;}

#espacio h2 {font: 2.5rem Nexa-Heavy;}

#principal h1 {font: 3rem Nexa-Heavy;}

#principal h2 {font: 2.5rem Nexa-Heavy;}

#secundario h1 {font: 3rem Nexa-Heavy;}

#secundario h2 {font: 2.5rem Nexa-Heavy;}

#centrar-lista {width:80%; margin: 0 auto; padding:0}

.imagen-texto li {list-style:none; padding:0.5em ;margin:0;}

.imagen-texto p {font: 1.6rem Nexa-Heavy;}

.imagen-texto img {width:70px; padding:0.5em; float:left;}

.espacio-p {font: 1.6rem Nexa-ExtraLight; padding: 1em 2.0em;}

#espacio #principal #mapa {width:80%;}

#espacio #secundario form {width:80%;}

#pasos {width:46.5%; min-height:200px; margin:0.5em 0 0 0.5em ; padding:0.5em; float:left;}

#pasos img {width:30%; max-width:100px; margin:0 auto; padding:o auto; right:0; left:0; position:absolute; top:10px;}
				
#pasos h1 {font: 1.6rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:80px;}

#pasos p {font: 0.9rem Nexa-ExtraLight; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:70px;}

#contacto {width:50%; min-height:300px; margin:1em 0 1em 25% ; padding:0.5em; float:left;}

#contacto img {width:30%; margin:0 auto; padding:o auto; right:0; left:0; position:absolute; top:35px;}

#contacto h1 {font: 1.6rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:140px;}

#contacto p {font: 0.9rem Nexa-ExtraLight; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:140px;}

#ofertas-solo {width:100%; margin:2em auto 0 auto; float:left; padding:0;}

#ofertas1, #ofertas2 {width:50%; margin:0 auto 2em auto; float:left; padding:0;}

#contenedor #cuerpo #boxbody {width:98%; margin: 0 auto;}

#contenedor #cuerpo #boxbody #principal {width:50%; float:right; margin:0 auto;}

#contenedor #cuerpo #boxbody #secundario {width:50%; float:left; margin:0 auto;}

#principal #requisitos h3 {font: 1.2rem Nexa-Heavy;}

#principal #requisitos p {font: 1.0rem Nexa-ExtraLight;}

td:nth-child(1) {width: 25%;}

#principal #requisitos table img {max-width: 10%; min-width: 70px; margin:0 0 0 0.5em}

#pie #copyright{font: 0.8rem/1rem Nexa-ExtraLight, "Comic Sans MS", sans-serif;}

}

/*------------media mobile 900 -----------*/


@media only screen and (min-width : 900px) and (max-width : 1199px)

{

/*------VISTA GENETAL-----*/ 

#contenedor {width:100%; margin: 0 auto}

#imagen-espacio { width:80%; margin:0 auto;}

#imagen-left {width:50%; float:left; margin: 1em;}

#centrar-lista {width:70%; margin: 0 auto; padding:0}

.imagen-texto li {list-style:none; padding:0.5em ;margin:0;}

.imagen-texto p {font: 2.0rem Nexa-Heavy;}

.imagen-texto img {width:85px; padding:0.5em; float:left;}

.espacio-p {font: 1.6rem Nexa-ExtraLight; padding: 1em 2.0em;}

#pasos h1 {font: 2.0rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:100px;}

#contacto {width:30%; min-height:300px; margin:1em 0 2em 2.5% ; padding:0.5em; float:left;}

#contacto img {width:35%; margin:0 auto; padding:o auto; right:0; left:0; position:absolute; top:40px;}

#contacto h1 {font: 1.6rem Nexa-Heavy; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:140px;}

#contacto p {font: 0.9rem Nexa-ExtraLight; text-align:center; margin:0 auto; padding: 0.25em; position:relative; top:140px;}

.espacio-p {font: 2.0rem Nexa-ExtraLight; padding: 1em 2.0em;}

#boxbody {width:90%; margin: 0 auto;}

#principal #requisitos h3 {font: 1.5rem Nexa-Heavy;}

td:nth-child(1) {width: 25%;}

#principal #requisitos table img {max-width: 10%; min-width: 80px; margin:0 0 0 1em}

}