@charset "utf-8";

* {
	margin: 0;
	padding:0;
	-webkit-box-sizing:border-box;
    -moz-box-sizing:   border-box;
    box-sizing:        border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding: 0;
	--negro: #224b22;
	--blanco: #ffffff;
	--verde: #459b35;
	--verde2: #81bc73;
	--naranja: #e97505;
	--naranja2: #f99450;
	--azul: #0fb2e8;
	--azul2: #75d9ef;
	--crema: #e2fde2;
	
	--width: calc(100% - 60px);
	--maxWidth: 1200px;
	background: var(--negro);
}

body {
	font-family: 'Poppins';
	font-weight: normal;
	color: var(--negro);
	background: var(--blanco);
	line-height:1.4;
	overflow-x:hidden !important;
}

h1 {
	line-height:1;
	font-family: 'Poppins Bold';
	font-weight: normal;
	font-size: 2.4em;
}
h2 {
	line-height:1;
	font-family: 'Poppins Bold';
	font-weight: normal;
	font-size: 1.8em;
}
a {
	font-size: 1em;
    text-decoration:none;
	color: var(--negro);
	cursor: pointer;
}
a:active {
	outline: none;
    border: none;
}
button {
	font-family: 'Poppins Bold';
	font-size: 1.2em;
	border-radius: 0 !important;
	cursor: pointer !important;
	border: none;
	transition: all 0.6s ease-in-out;
}
button:active {
    outline: none;
    border: none;
}
button:hover {
	cursor:pointer;
}
button:focus,
input:focus,
textarea:focus {
	outline:none;
}
p, ul {
	font-size:1em;
}
p b {
	font-family: 'Poppins Bold';
	font-weight: normal;
}

::selection {
	color: var(--blanco);
	background: var(--naranja);
}
::-moz-selection {
	color: var(--blanco);
	background: var(--naranja);
}

/* --------------------------- css --------------------------- */

#cortina {
	width: 100vw;
	height:100vh;
	position: fixed;
	top: -100%;
	left:0;
	background: var(--verde);
	animation: gone 1.2s;
	pointer-events: none !important;
	z-index: 66;
}
@-webkit-keyframes gone {
	0% {
		top: 0;
	}
	42% {
		top: 0;
	}
	100% {
		top: -100%;
	}
}
@-moz-keyframes gone {
	0% {
		top: 0;
	}
	42% {
		top: 0;
	}
	100% {
		top: -100%;
	}
}
@keyframes gone {
	0% {
		top: 0;
	}
	42% {
		top: 0;
	}
	100% {
		top: -100%;
	}
}

header {
	width: 100%;
	color: var(--blanco);
	background: var(--verde);
	padding:18px 0;
}
header main {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
header main img {
	width: 210px;
}
header main div {
	text-align: right;
}
header main h3 {
	font-family: 'Poppins';
	font-weight: normal;
	font-size: 0.7em;
}

.section {
	position: relative;
}

main {
	width: var(--width);
	max-width: var(--maxWidth);
	margin: 0 auto;
	position: relative;
}

.btn {
	width: auto;
	font-family: 'Aeonik';
	font-size: 0.9em;
	color: var(--blanco);
	background: var(--azul);
	padding:12px 18px;
	position: relative;
	display: inline-block;
	border-radius: 6px !important;
}
.btn:hover {
	color: var(--negro);
	background: var(--amarillo);
}

.titulo {
	margin: 72px auto;
	text-align: center;
}
.titulo h1 {
	width: 100%;
	padding:0 25%;
}

ol {
	width: var(--width);
	max-width: var(--maxWidth);
	margin: 0 auto;
	position: relative;
	list-style: none;
}
ol > li {
	margin: 0 auto 90px;
	position: relative;
	display: flex;
	justify-content: space-between;
}
ol > li::after {
	content: '';
	width: 100%;
	height:1px;
	background: var(--verde);
	position: absolute;
	left:  0;
	bottom:-45px;
	z-index: 3;
}
ol > li h2 {
	width: calc(33.3% - 15px);
	position: relative;
}
ol > li h2 number {
	font-family: 'Poppins';
	font-size: 0.7em;
	color: var(--naranja);
	position: absolute;
	top: 0;
	left:0;
	transform: translate(-99%,-84%);
}
ol > li > div {
	width: calc(66.6% - 15px);
}
ol > li > div p {
	margin: 0 auto 24px;
	text-align: justify;
	text-justify: inter-word;
}
ol > li > div p:last-child {
	margin: 0 auto;
}

table {
	position: relative;
}
table tr {
	position: relative;
	display: flex;
}
table tr td {
	width: 66.6%;
	padding:15px;
	text-align: justify;
	text-justify: inter-word;
}
table tr td:first-child {
	width: 33.3%;
}
table tr td.tit {
	font-family: 'Poppins Bold';
	color: var(--blanco);
	background: var(--verde);
	position: relative;
	display: flex;
	align-items: center;
	text-align: left;
	text-justify: none;
}
table tr:first-child td.tit:first-child,
table tr td.tit:nth-child(2) {
	font-size: 1.2em;
	justify-content: center;
	background: var(--negro);
}

ul {
	margin: 0 0 24px;
	padding:0 0 0 60px;
}
ul.num {
	list-style: decimal !important;
}
ul:last-child {
	margin: 0;
}
ul li {
	margin: 0 auto 12px;
	text-align: justify;
	text-justify: inter-word;
}
ul li:last-child {
	margin: 0 auto;
}

ol > span {
	width: 100%;
	font-size: 0.7em;
	color: var(--naranja);
}

footer {
	width: 100%;
	margin: 72px auto 0;
	padding:24px 0 30px;
	color: var(--blanco);
	background: var(--negro);
}
footer main {
	text-align: center;
}
footer main img {
	width: 42px;
	margin: 0 auto 6px;
}
footer main p ,
footer main a {
	color: var(--blanco);
	font-size: 0.7em;
}
footer main p {
	margin: 0 auto 3px;
}
footer main a:hover {
	text-decoration: underline;
}

@media screen and (max-width:666px) {
	
	html {
		--width: calc(100% - 30px);
	}
	
	h1 {
		font-size: 1.8em;
	}
	h2 {
		font-size: 1.3em;
	}
	a {
		font-size: 0.9em;
	}
	button {
		font-size: 1em;

	}
	p, ul {
		font-size:0.9em;
	}

		header main {
		align-items: center;
	}
	header main img {
		width: 150px;
	}
	header main h3 {
		font-size: 0.6em;
	}

	.titulo {
		margin: 66px auto;
	}
	.titulo h1 {
		padding:0 30px;
	}

	ol > li {
		flex-wrap: wrap;
		gap: 24px;
	}
	ol > li h2 {
		width: 100%;
		padding:0 12px;
	}
	ol > li h2 number {
		font-size: 0.7em;
		transform: translate(-30%,-96%);
	}
	ol > li > div {
		width: 100%;
	}

	table tr {
		font-size: 0.9em;
	}
	table tr td.tit {
		font-size: 0.8em;
	}
	table tr:first-child td.tit:first-child,
	table tr td.tit:nth-child(2) {
		font-size: 0.9em;
	}

	footer main img {
		width: 39px;
	}
	footer main p ,
	footer main a {
		font-size: 0.6em;
	}
	
}