/* Variables CSS */
:root {
	--font-size-sm: 13px;
	--font-size: 16px;
	--font-size-lg: 20px;
	--font-size-xl: 25px;
	--font-size-xxl: 40px;
	--line-height: 1.5;

	--color-primary: #FFF;
	--color-secondary: #F2B42D;
	--color-tertiary: #D7425E;
	--color-blue: #48A8E2;
	--color-lblue: #59ABA9;
	--color-orange: #DD785E;
	--color-inverse: #CCC;
	--color-yellow: #FCEC99;

	--link-color: #F2B42D;
	--link-color-hover: #FFF;

	--font-primary: 'PT Sans', sans-serif;
	--font-secondary: 'Nunito', sans-serif;

	--color-card-primary : #525271BF;
	--color-card-primary-nt : #525271;
	--color-card-secondary: #00002E;
	--color-card-tertiary: #B05EF1BF;
	--color-card-border: #3A3A5B;

	--color-cajas: #434362;
	--color-cajas-border: #5C5C7B;

	--color-btn-primary: #F2B42D;

	--gutter-xs: 5px;
	--gutter-sm: 15px;
	--gutter: 20px;
	--gutter-lg: 25px;
	--gutter-xl: 35px;

	--gap-xs: 5px;
	--gap-sm: 15px;
	--gap: 20px;
	--gap-lg: 25px;
	--gap-xl: 28px;

	--border-radius: 20px;
}

/* Fonts */
/* PT Sans 400, 400i, 700 & 700i */
@font-face {
    font-family: 'PT Sans';
    src: url('/fonts/PTSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'PT Sans';
    src: url('/fonts/PTSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'PT Sans';
    src: url('/fonts/PTSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'PT Sans';
    src: url('/fonts/PTSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
/* Nunito 400, 400i & 700 */
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/Nunito-Regular.ttf') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/Nunito-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/Nunito-Bold.ttf') format('truetype');
    font-weight: 700;
}

/* Servicios */
.font-nunito { font-family: var(--font-secondary); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.italic { font-style: italic; }
.bold { font-weight: bold; }
a { color: var(--link-color); }
a:hover { color: var(--link-color-hover); }
a:hover img {
	filter: drop-shadow(0 6px 12px rgba(206, 110, 15, 0.95));
}

/* Globals */
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-primary);
	font-size: var(--font-size);
	line-height: var(--line-height);
	margin: 0;
	color: var(--color-primary);
}
.background {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
	background-image: url("images/background.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
}
.container {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 4em auto 2em auto;
	padding: 0 20px;
}

/* Servicios */
.mb { margin-bottom: var(--gutter) !important; }
.mb- { margin-bottom: var(--gutter-sm) !important; }
.mb-- { margin-bottom: var(--gutter-xs) !important; }
.mt { margin-top: var(--gutter) !important; }
.card-container {
	box-sizing: border-box;
	padding: 2.75em 4em;
}
.btn {
	border-radius: var(--border-radius);
	padding: 0.5em 0.8em;
	font-weight: 600;
	font-size: 1em;
	border: 2px solid var(--color-btn-primary);
	text-decoration: none;
}
.btn--default {
	color: #000;
	border-color: var(--color-btn-primary);
	background-color: var(--color-btn-primary);
}
.btn--inverse {
	color: var(--color-btn-primary);
	background-color: transparent;
}
.btn:hover {
	color: var(--link-color-hover) !important;
	filter: drop-shadow(0 6px 12px rgba(206, 110, 15, 0.95));
}

/* Colores */
.color-primary { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }
.color-tertiary { color: var(--color-tertiary); }
.color-blue { color: var(--color-blue); }
.color-lblue { color: var(--color-lblue); }
.color-orange { color: var(--color-orange);}
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-tertiary { background-color: var(--color-tertiary); }
.bg-transparent { background-color: var(--color-card-primary-nt); }

/* Menu */
.menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	row-gap: 0;
	height: 4em;
	z-index: 10;
	background-color: #00002ecc;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
	box-sizing: border-box;
	padding: 0 20px;
}
.menu a {
	text-decoration: none;
}

/* Card Styles */
.card {
	display: flex;
	flex-direction: row;
	justify-content: center;
	border-radius: 2em;
	box-sizing: border-box;
	word-wrap: break-word;
	border: solid 3px var(--color-card-border);
	overflow: hidden;
	background-color: var(--color-card-primary);
}
.card:not(:last-of-type) {
	margin-bottom: 4em;
}
.card-3-1 > :first-child {
    flex: 3;
	max-width: 730px;
}
.card-3-1 > :nth-child(2) {
    flex: 1;
}

/* Card 01 */
.card-01-left {
	background-image: url("images/card-01-left.jpg");
	aspect-ratio: 875/787;
	-webkit-background-position: center;
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
}
.card-01-right {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--gap);
	line-height: 26px;
	overflow-wrap: break-word;
	background-color: var(--color-card-secondary);
}
.card-01-right-logo {
	width: 320px;
	max-width: 100%;
	height: auto;
	margin: auto;
	display: block;
}

/* Card 02 */
.card-02-left {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}
.card-02-right {
	background-image: url("images/card-02-right.jpg");
	aspect-ratio: 526/909;
	-webkit-background-position: center;
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
}
.card-02-title {
	font-family: var(--font-secondary);
	font-style: italic;
	color: var(--color-secondary);
	font-size: var(--font-size-lg);
	margin: 0 0 var(--gutter-xs) 0;
	font-weight: normal;
}
.card-02-subtitle {
	color: var(--color-secondary);
	font-size: var(--font-size-sm);
	margin: 0 0 var(--gutter-xs) 0;
}
.card-02-bajada {
	font-size: var(--font-size-sm);
}
.card-02-intro {
	margin-bottom: var(--gutter-sm);
}
.card-02-cajas {
	display: flex;
	justify-content: stretch;
	gap: var(--gap-xs);
}
.card-02-cajas > * {
  flex: 1;
}
.card-02-caja {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: var(--gap-sm);
	padding: var(--gutter-sm);
	border: 2px solid var(--color-cajas-border);
	border-radius: var(--border-radius);
	background-color: var(--color-cajas);
	text-align: center;
	margin-bottom: var(--gutter-xs);
}
.card-02-links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap-sm);
}
.card-02-link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--gap);
	font-size: var(--font-size-sm);
	width: fit-content;
	height: fit-content;
	margin: auto;
}
.card-02-link img {
	width: 54px;
	height: auto;
	aspect-ratio: 1/1;
}

/* Card 03 */
.card-03-title {
	font-family: var(--font-secondary);
	color: var(--color-tertiary);
	font-size: var(--font-size-lg);
	margin: 0 0 var(--gutter) 0;
	font-weight: bold;
}
.card-03-bajada {
	font-size: var(--font-size-sm);
	margin-bottom: var(--gutter);
}
.card-03-grid-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
	margin-bottom: var(--gutter);
}
.card-03-grid-logos-0 img {
	max-height: 52px;
	width: auto;
}
.card-03-grid-logos-1 img {
	height: 90px;
	width: auto;
}
.card-03-bloques {
	display: flex;
	justify-content: space-between;
	text-align: center;
	gap: var(--gutter);
}
.card-03-bloques > * {
  flex: 1;
}
.card-03-bloques-title {
	font-size: var(--font-size-xxl);
	margin-bottom: var(--gutter-sm);
	font-weight: bold;
	color: var(--color-secondary);
}
.card-03-bloques-bajada {
	font-size: var(--font-size-sm);
}

/* Card 04 */
.card-04-title {
	/* font-family: var(--font-secondary); */
	color: var(--color-secondary);
	font-size: var(--font-size-xl);
	text-align: center;
	margin: 0 0 var(--gutter) 0;
	font-weight: normal;
}
.card-04-bloque {
	font-family: var(--font-secondary);
	font-weight: bold;
	display: flex;
	margin-bottom: var(--gutter-sm);
}
.card-padding > .card-04-bloque:nth-child(3) {
	margin-left: 10px;
}
.card-padding > .card-04-bloque:nth-child(4) {
	margin-left: 20px;
}
.card-04-bloque-yellow {
	font-family: var(--font-secondary);
	font-weight: bold;
	display: flex;
	margin-bottom: var(--gutter-sm);
	background-color: var(--color-secondary);
	border: 2px solid var(--color-cajas-border);
	padding: var(--gap-sm);
	border-radius: var(--border-radius);
	color: #000;
}
.card-04-bloque-yellow-icono {
	color: #906609ff;
	width: 22px;
	height: 18px;
	margin-top: 2px;
	margin-right: 16px;
}
.card-04-bloque-yellow-title {
	font-weight: bold;
	color: rgb(32, 76, 142);
}
.card-04-precaja {
	border: 2px solid var(--color-cajas-border);
	padding: 5px;
	border-radius: var(--border-radius) 0 0 var(--border-radius);
	background-color: transparent;
	border-right-width: 0px;
}
.card-04-caja {
	background-color: var(--color-card-primary);
	border: 2px solid var(--color-cajas-border);
	padding: var(--gap-sm);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.card-04-subtitle {
	color: var(--color-secondary);
}

/* Card 05 */
.card-05 > :first-child {
	min-width: 438px;
}
.card-05-left {
	background-image: url("images/card-05-left.jpg");
	aspect-ratio: 569/859;
	-webkit-background-position: center;
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
}
.card-05-title {
	/* font-family: var(--font-secondary); */
	color: var(--color-orange);
	font-size: var(--font-size-xl);
	margin: 0 0 var(--gutter) 0;
	font-weight: normal;
}
.card-05-bloques {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* flex-wrap: wrap; */
	gap: var(--gap);
	margin-bottom: var(--gutter);
}
.card-05-bloques > * {
	flex: 1;
}
.card-05-logo {
	width: 200px;
	height: 200px;
}
.card-05-subtitle {
	color: var(--color-tertiary);
	margin-bottom: var(--gutter-sm);
}

/* Card 06 */
.card-06-cajas {
	display: flex;
	flex-direction: row;
	gap: var(--gutter);
	margin-bottom: var(--gutter);
}
.card-06-caja > * {
	flex: 1;
}
.card-06-caja {
	border: 2px solid var(--color-btn-primary);
	padding: 14px;
	border-radius: var(--border-radius);
	border-top-width: 14px;
	position: relative;
}
.card-06-caja-verde {
	border-color: #5cc97b;
}
.card-06-nro {
	font-size: var(--font-size-sm);
	color: #000;
	position: absolute;
	top: -25px;
	padding: 8px 16px;
	background-color: var(--color-secondary);
	border-radius: 50%;
	left: 50%;
	transform: translateX(-50%);
}
.card-06-nro-verde {
	background-color: #5cc97b;
}
.card-06-title {
	font-family: "Nunito";
	font-size: 27px;
	font-weight: 600;
	line-height: 34.45px;
	text-align: center;
	color: var(--color-secondary);
	margin-bottom: var(--gutter-xl);
}
.card-06-subtitle {
	color: var(--color-secondary);
	margin-bottom: var(--gap-xs);
}
.card-06-link {
	display: flex;
	align-items: center;
	gap: var(--gutter-sm);
	word-break: break-all;
}
.card-06-button {
	background-color: var(--color-btn-primary);
	border-radius: var(--border-radius);
	width: 30px;
	padding: 10px 50px;
	display: inline-block;
}

/* Card 07 */
.card-07 {
	font-size: var(--font-size-sm);
}
.card-07-title {
	font-family: "Nunito";
	font-size: 27px;
	font-weight: 600;
	line-height: 34.45px;
	text-align: center;
	color: var(--color-blue);
	margin-bottom: var(--gutter-xl);
}
.card-07-image-container {
	text-align: center;
	margin-bottom: var(--gutter);
}
.card-07-image {
	border-radius: var(--border-radius);
	width: 684px;
}
.card-07-cajas {
	display: flex;
	border: 1px solid var(--color-cajas-border);
	background-color: var(--color-cajas);
	justify-content: center;
	align-items: stretch;
	border-radius: 20px;
	margin: var(--gutter) 0;
}
.card-07-cajas > * {
	padding: var(--gap);
}
.card-07-cajas > div:nth-child(2) {
  border-left: 1px solid var(--color-cajas-border);
  border-right: 1px solid var(--color-cajas-border);
}

/* Card 08 */
.card-08-title {
	font-family: "Nunito";
	font-size: 27px;
	font-weight: 600;
	line-height: 34.45px;
	text-align: center;
	color: var(--color-lblue);
	margin-bottom: var(--gutter-xl);
}
.card-08-image-container {
	text-align: center;
	margin-bottom: var(--gutter);
}
.card-08-image {
	border-radius: var(--border-radius);
	width: 684px;
}
.card-08-descripcion {
	/* font-family: "Nunito"; */
	font-size: var(--font-size-lg);
	/* font-weight: bold; */
	color: var(--color-yellow);
}

/* Card 09 */
.card-09-left {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	color: var(--color-yellow);
	margin: auto 0;
}
.card-09-right {
	background-image: url("images/card-09-right.jpg");
	aspect-ratio: 350/930;
	-webkit-background-position: center;
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
}
.card-09-title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-lg);
	margin: 0 0 var(--gutter) 0;
	font-weight: bold;
}
.card-09-bloque {
	position: relative;
	padding: 15px 0 15px 20px;
	font-size: var(--font-size-sm);
	margin-bottom: var(--gap-xs);
}
.card-09-bloque::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 6px;
  height: calc(100% - 8px);
  background-color: var(--color-cajas);
  border: 1px solid var(--color-cajas-border);
  border-radius: 999px;
}
.card-09-bloque:nth-child(7n + 2) { margin-left: 10px; }
.card-09-bloque:nth-child(7n + 3) { margin-left: 20px; }
.card-09-bloque:nth-child(7n + 4) { margin-left: 30px; }
.card-09-bloque:nth-child(7n + 4) { margin-left: 40px; }
.card-09-bloque:nth-child(7n + 5) { margin-left: 30px; }
.card-09-bloque:nth-child(7n + 6) { margin-left: 20px; }
.card-09-bloque:nth-child(7n + 7) { margin-left: 10px; }

/* Card 10 */
.card-10-left {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	margin: auto 0;
}
.card-10-right {
	background-image: url("images/card-10-right.jpg");
	aspect-ratio: 437/761;
	-webkit-background-position: center;
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
}
.card-10-title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-lg);
	margin: 0 0 var(--gutter) 0;
	font-weight: bold;
	color: var(--color-secondary);
}
.card-10-bloque {
	position: relative;
	padding: 5px 0 5px 15px;
	font-size: var(--font-size-sm);
	margin-bottom: var(--gap-xs);
	color: var(--color-yellow);
}
.card-10-bloque::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 3px;
	height: calc(100% - 8px);
	background-color: var(--color-secondary);
}

/* Card 10-5 */
.card-10-5-title {
	font-family: var(--font-secondary);
	color: var(--color-tertiary);
	font-size: var(--font-size-xxl);
	margin: 0 0 var(--gutter) 0;
	font-weight: bold;
}
.card-10-5-circle-logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-bottom: var(--gap);
}
.card-10-5-circle-logos > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 80px;
	flex-wrap: wrap;
	row-gap: 20px;
	width: 100%;
}

/* Card 11 */
.card-11 {
	background-color: #B05EF1BF;
}
.card-11 .card-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	gap: 20px;
}
.card-11-left {
	flex: 4;
}
.card-11-right {
	flex: 6;
	padding: 20px 20px;
	background-color: #B05EF1BF;
	border-radius: var(--border-radius);
}
.card-11-title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-xl);
	margin: 0 0 var(--gutter) 0;
	font-weight: bold;
	color: rgb(216, 175, 248);
}
.card-11-logo {
	width: 316px;
}
.card-11-bloque {
	position: relative;
	padding: 5px 0 5px 15px;
	font-size: var(--font-size-lg);
	margin-bottom: var(--gap-xs);
	color: #CCC;
}
.card-11-bloque::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 3px;
	height: calc(100% - 8px);
	background-color: var(--color-secondary);
}
.card-11-icon {
	width: 31px;
	height: 31px;
	margin: var(--gutter) 0 var(--gutter-sm) 0;
	color: #000;
}

/* Card 12 */
.card-12-bajada {
	margin-top: var(--gutter-sm);
	text-align: center;
	font-size: var(--font-size-xl);
}
.card-12-logo {
	max-width: 250px;
	height: auto;
	display: block;
	margin: 50px auto;
}
.card-12-foto {
	display: block;
	margin: auto;
	width: 100%;
	height: auto;
	max-width: 800px;
	border-radius: var(--border-radius);
}
.card-12-cierre {
	text-align: center;
	font-size: var(--font-size-xxl);
}

@media (max-width: 1100px) {
	.card {
		flex-direction: column;
	}
	.card-container {
		padding: 2em 1em;
	}
	.card-01-left, .card-05-left {
		width: 50%;
		height: auto;
		max-width: unset !important;
		min-width: unset !important;
		border-radius: var(--border-radius);
		margin-top: var(--gutter-lg);
		margin-top: 0;
		width: 100%;
		border-radius: 0;
	}
	.card-02-right {
		order: 1;
		width: 50%;
		height: auto;
		border-radius: var(--border-radius);
		margin: var(--gutter-lg) auto;
	}
	.card-02-left {
		order: 2;
		max-width: unset !important;
	}
	.card-02-links {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
	.card-03-bloques {
		flex-direction: column;
	}
}
@media (max-width: 800px) {
	.card-07-image, .card-08-image {
		width: 100%;
	}
	.card-07-cajas {
		flex-direction: column;
	}
	.card-11 .card-container {
		flex-direction: column;
	}
	.card-10-5-circle-logos > div {
		justify-content: center;
	}
}
@media (max-width: 550px) {
	.card-02-links {
		grid-template-columns: repeat(1, 1fr);
	}
	.card-02-link {
		margin-bottom: 15px;
	}
	.card-05-bloques {
		flex-direction: column;
	}
	.card-06-cajas {
		flex-direction: column;
	}
	.card-06-button {
		width: 100px;
		padding: 10px 20px;
	}
	.card-10-5-circle-logos > div {
		flex-direction: column;
	}
}
@media (max-width: 460px) {
	.container {
		margin-top: 6em;
	}
	.menu {
		height: 6em;
	}
	.card-10-5-circle-logos > div img {
		max-width: 100%;
	}
}

/* Animacion */
.animacion {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.animacion.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* GoTop */
#goTop {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	background: var(--color-btn-primary);
	color: #000;
	font-size: 25px;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	padding-bottom: 20px;
	z-index: 10;
}
#goTop.show {
	opacity: 1;
	pointer-events: auto;
}

/* Ajuste de scroll para las card's y sus anclas */
[id^="card-"] {
	scroll-margin-top: 4em;
}

/* ID */
.internetdinamica {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.internetdinamica::before {
		content: "Desarrollado por";
		font-size: 10px;
		white-space: nowrap;
		color: #6f6f6f;
}
.internetdinamica::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 32px;
	width: auto;
	aspect-ratio: 580.4 / 158.6;
	background-position: 0 0;
	background-size: 100% auto;
	background-image: url('/images/internetdinamica.svg');
}
.internetdinamica:hover::after {
	background-position: 0 -100%;
}