/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* ACA TERMINA RESET */
@font-face {
font-family: 'titulos';
font-style:normal;
font-weight: bold;
src: url(../media/FUENTES/Heebo/);
}
@font-face {
font-family: 'subtitulos';
font-style: normal;
font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@font-face {
font-family: 'parrafos';
font-style: normal;
font-weight: lighter;
src: url(../Media/FUENTES/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf);
}
/* Pág principal */
body {
margin: auto;
background-color: #FCF8E8;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.contenedor0 {
background: #94B49F;
width: 100%;
margin: auto;
height: 713px;
text-align: center;
}
.contenedor0 .contenido0 {
background: #94B49F;
width: 65%;
margin: auto;
height: 90%;
text-align: center;
}
.contenedor0 .contenido0 .gif {
width: 30%;
height: auto;
padding-top: 15%;
}
.contenedor0 .contenido0 p {
font-size: 20px;
text-align: justify center;
font-weight: lighter;
padding: 2%;
padding-top: 5%;
line-height: 120%;
}
.contenedor {
background:#FCF8E8;
width: 90%;
margin: 0 auto;
height: 655px;
}
.contenedor .encabezado {
background:#94B49F;
width: 90%;
margin: 0% auto;
height: 20%;
}
.contenedor .encabezado .logo {
background:#FCF8E8;
width: 28%;
height: 82%;
float: left;
padding: 1%;
}
.contenedor .encabezado .logo img {
height: 100%;
width: auto;
margin: 0 auto;
padding-left: 25%;
}
.contenedor .encabezado .titulo {
background: #FCF8E8;
width: 70%;
height: 100%;
float: left;
}
.contenedor .encabezado .titulo .nombre {
background:#FCF8E8;
width: 100%;
height: 50%;
float: left;
}
.contenedor .encabezado .titulo nav {
background:#FCF8E8;
width: 100%;
height: 50%;
float: left;
}
/* menú de navegación */
.nav {
height: 50px;
float: right;
padding-right: 12%;
padding-top: 3%;
}
ul{
height: 50px;
justify-content: center;
align-items: center;
display: flex;
}
li{
padding: 0px 5px;
list-style-type: none;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a{
text-decoration:none;
font-size: 20px;
font-weight: bold;
color: black;
position: relative;
}
a:after {
position: absolute;
content: "";
height: 5px;
border-radius: 2px;
width: 0%;
background-color: #cce6ce;
left: 0px;
transition: 1s;
bottom: -10px;
}
a:hover::after {
width: 100%;
}
button {
width: 120px;
height: 30px;
margin-top: 15px;
transition: 1s;
border-radius: 10px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #94B49F;
color: white;
border: 0px;
}
button:hover{
color:white;
background-color: #ECB390;
}
.contenedor .contenido {
background:#FCF8E8;
width: 100%;
margin: 2% auto;
height: 80%;
}
.contenedor .contenido .parrafo {
background: #FCF8E8;
width: 40%;
margin: 5% auto;
margin-left: 5%;
height: 60%;
float: left;
padding-left: 5%;
padding-top: 10%;
}
h1 {
font-size: 55px;
font-weight: normal;
padding-top: 3%;
}
Span {
color: #ECB390;
}
p{
float: center;
Font-size: 30px;
font-weight: lighter;
margin-top: 1%;
line-height: 120%;
}
.contenedor .contenido .imagen1 {
background: #FCF8E8;
width: 35%;
margin: 0% auto;
height: 100%;
float: right;
}
.interfaz1{
height: 100%;
width: auto;
margin: 0 auto;
}
/* Página de PROCESO */
.contenedor .contenido .proceso h2 span a {
font-size: 55px;
font-weight: normal;
text-align:center;
padding-top: 3%;
color: #94B49F;
}
.contenedor .contenido .proceso {
background:#FCF8E8;
width: 30%;
margin: 1% auto;
height: 20%;
}
h2 {
font-size: 55px;
font-weight: normal;
text-align:center;
padding-top: 3%;
}
.contenedor .contenido .separador1 {
background: #FCF8E8 ;
width: 40%;
margin: 1% auto;
height: 15%;
padding-top: 0%;
}
.contenedor .contenido .separador1 .hoja {
width: auto;
height: 100%;
padding-left: 42%;
}
.contenedor .contenido .ux {
background: #FCF8E8;
width: 80%;
margin: 1% auto;
height: 8%;
padding-top: 2%;
border-radius: 20px;
}
.contenedor .contenido .objetivos {
background: #cce6ce;
width: 80%;
margin: 1% auto;
height: 35%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .objetivos li {
font-size: 18px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: justify;
padding-top: 1%;
padding: 0px 10px;
font-weight: lighter;
}
h3 {
font-size: 25px;
font-weight: normal;
text-align:center;
font-style: oblique;
}
h4 {
font-size: 25px;
font-weight: normal;
text-align:center;
}
ol{
align-items: center;
display: flex;
list-style-type: none;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 18px;
padding-top: 3%;
padding-left: 2%;
padding-right: 1%;
line-height: 120%;
}
.contenedor .contenido .usuarios {
background:#cce6ce;
width: 80%;
margin: 1% auto;
height: 40%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .usuarios li {
font-size: 18px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: justify;
padding-top: 1%;
padding: 0px 10px;
font-weight: lighter;
}
.contenedor .contenido .protopersona {
background:#cce6ce;
width: 80%;
margin: 1% auto;
height: 350%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .protopersona p {
width: 80%;
margin: 1% auto;
padding-top: 2%;
padding: 3%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
.contenedor .contenido .protopersona .usuarios2 {
height:auto;
width: 80%;
margin: 1% auto;
margin-top: 0%;
padding-left: 4%;
}
.contenedor .contenido .viajedeusuario {
background:#cce6ce;
width: 80%;
margin: 1% auto;
height: 275%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .viajedeusuario p {
width: 80%;
margin: 1% auto;
padding-top: 2%;
padding: 3%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
.usuario1 {
width: 60%;
align-items: center;
padding-top: 2%;
}
.usuario2 {
width: 60%;
align-items: center;
padding-top: 2%;
}
.usuario3 {
width: 60%;
align-items: center;
padding-top: 2%;
}
.contenedor .contenido .arboldenavegacion {
background:#cce6ce;
width: 80%;
margin: 1% auto;
height: 115%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .arboldenavegacion p {
width: 80%;
margin: 0% auto;
padding-top: 2%;
padding: 3%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
.arbol {
height: 70%;
width: auto;
margin: 0% auto;
margin-top: 0%;
}
.contenedor .contenido .ui {
background: #FCF8E8;
width: 80%;
margin: 1% auto;
height: 8%;
padding-top: 2%;
border-radius: 20px;
}
.contenedor .contenido .wireframes {
background:#cce6ce;
width: 80%;
margin: 1% auto;
height: 160%;
padding-top: 2%;
border-radius: 20px;
justify-content: center;
text-align: center;
}
.contenedor .contenido .wireframes p {
width: 80%;
margin: 1% auto;
padding-top: 2%;
padding: 3%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
.lo-fi {
height: 60%;
width: auto;
margin: 0% auto;
margin-top: 0%;
}
.contenedor .contenido .wireframes2 {
background:#cce6ce;
width: 80%;
margin: 1% auto;
height: 260%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .wireframes2 p {
width: 80%;
margin: 1% auto;
padding-top: 2%;
padding: 1%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
.hi-fi {
width: 60%;
align-items: center;
padding-top: 0%;
}
.contenedor .contenido .prototipo {
background:#cce6ce;
width: 80%;
margin: 1% auto;
height: 300%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .prototipo p {
width: 80%;
margin: 1% auto;
padding-top: 2%;
padding: 3%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
/*p es la inicial de Prototipo*/
.p1 {
width: 50%;
align-items: center;
padding-top: 1%;
}
.contenedor .contenido .iv {
background: #FCF8E8;
width: 80%;
margin: 1% auto;
height: 8%;
padding-top: 2%;
border-radius: 20px;
}
.contenedor .contenido .identidad {
background:#cce6ce;
width: 80%;
margin: 1% auto;
height: 470%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .identidad p {
width: 80%;
margin: 1% auto;
padding-top: 2%;
padding: 3%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
.identidadv {
width: 60%;
align-items: center;
padding-top: 1%;
}
.contenedor .contenido .btn {
background:#FCF8E8;
width: 80%;
margin: 1% auto;
height: 10%;
padding-top: 0%;
border-radius: 20px;
text-align: right;
padding-right:10% ;
}
.contenedor .contenido .btn button {
width: 120px;
height: 30px;
margin-top: 5px;
transition: 1s;
border-radius: 10px;
font-size: 15px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #ECB390;
color: white;
border: 0px;
}
.volver{
width: 30%;
padding-top: 0% auto;
float: left;
}
/*Menú Creadoras*/
.contenedor .contenido .creadoras {
background:#FCF8E8;
width: 30%;
margin: 1% auto;
height: 20%;
}
.contenedor .contenido .nosotras {
background: #cce6ce;
width: 80%;
margin: 1% auto;
height: 130%;
padding-top: 1%;
border-radius: 20px;
}
.contenedor .contenido .nosotras .modulo {
background: #cce6ce;
width: 80%;
margin: 1% auto;
height: 25%;
padding-top: 1%;
border-radius: 20px;
}
.contenedor .contenido .nosotras .modulo{
font-size: 20px;
text-align: center;
font-weight: lighter;
line-height: 115%;
padding-top: 3%;
}
.contenedor .contenido .nosotras .somos {
background: #cce6ce;
width: 80%;
margin: 1% auto;
height: 8%;
padding-top: 3%;
border-radius: 20px;
}
.contenedor .contenido .fotos h3 {
font-size: 20px;
font-weight: normal;
text-align:center;
padding-top: 2%;
}
.sub{
font-size: 16px;
font-weight: normal;
text-align: center;
}
.contenedor .contenido .nosotras .fotos {
background: #cce6ce;
width: 80%;
margin: 1% auto;
height: 25%;
padding-top: 1%;
border-radius: 20px;
display: flex;
}
.contenedor .contenido .nosotras .fotos .foto1 {
background: #cce6ce;
width: 25%;
margin: 1% auto;
height: auto;
padding-top: 2%;
border-radius: 20px;
}
.dani{
justify-content: center;
width: 80%;
align-items: center;
padding: 10% auto;
padding-top: 0%;
padding-left: 10%;
}
.contenedor .contenido .nosotras .fotos .foto2 {
background: #cce6ce;
width: 25%;
margin: 1% auto;
height: auto;
padding-top: 2%;
border-radius: 20px;
}
.anita{
justify-content: center;
width: 80%;
align-items: center;
padding: 10% auto;
padding-top: 0%;
padding-left: 10%;
}
.contenedor .contenido .nosotras .fotos .foto3 {
background: #cce6ce;
width: 25%;
margin: 1% auto;
height: auto;
padding-top: 2%;
border-radius: 20px;
}
.yuli{
justify-content: center;
width: 80%;
align-items: center;
padding: 10% auto;
padding-top: 0%;
padding-left: 10%;
}
/*Menu App*/
.contenedor .contenido .figma {
background: #cce6ce;
width: 80%;
margin: 1% auto;
height: 150%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .figma p {
width: 80%;
margin: 1% auto;
padding-top: 2%;
padding: 3%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
.contenedor .contenido .figma video {
margin: 1% auto;
height: 60%;
padding-top: 1%;
}
h5 {
font-size: 18px;
font-weight: lighter;
font-style: oblique;
text-align:center;
padding-top: 0.5%;
}
.contenedor .contenido .bravo {
background: #cce6ce;
width: 80%;
margin: 0% auto;
height: 140%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .bravo p {
width: 80%;
margin: 1% auto;
padding-top: 2%;
padding: 2%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
.bravoimg {
width: 70%;
align-items: center;
padding-top: 0%;
}
.contenedor .contenido .illustrator {
background: #cce6ce;
width: 80%;
margin: 1% auto;
height: 125%;
padding-top: 2%;
border-radius: 20px;
text-align: center;
}
.contenedor .contenido .illustrator p {
width: 80%;
margin: 1% auto;
padding-top: 2%;
padding: 2%;
font-size: 20px;
text-align: justify;
border-radius: 20px;
}
.contenedor .contenido .softwares {
background:#cce6ce;
width: 80%;
margin: 1% auto;
height:20%;
padding-top: 1%;
border-radius: 20px;
}
.contenedor .contenido .softwares .iconos {
background:#cce6ce;
width: 40%;
margin: 1% auto;
height: 50%;
border-radius: 20px;
display:flex;
}
.contenedor .contenido .softwares .iconos .icono1 {
background: #cce6ce;
width: 25%;
margin: 1% auto;
height: auto;
padding-top: 0%;
border-radius: 20px;
padding-left: 1%;
}
.contenedor .contenido .softwares .iconos .icono2{
background: #cce6ce;
width: 35%;
margin: 1% auto;
height: auto;
padding-top: 4%;
border-radius: 20px;
padding-left: 1%;
}
.contenedor .contenido .softwares .iconos .icono3{
background: #cce6ce;
width: 25%;
margin: 1% auto;
height: auto;
padding-top: 0%;
border-radius: 20px;
padding-left: 1%;
}
.icono {
justify-content: center;
width: 60%;
padding-top: 0%;
padding-left: 15%;
}
.contenedor footer{
margin-top: 1%;
margin-right: 5%;
margin-top: 1%;
margin-left:5%;
width:90%;
height:6%;
float:left;
border-radius:2%;
}
.contenedor footer p{
margin-left:25%;
float:center;
color: black;
height:90%;
width:50%;
font-size: 15px;
text-align:center;
}