/*Template https://html5up.net
Selector id="name" #name{} (Elemento único)
Selector class="name" .name{} (Elementos que comparten la misma clase) 
Padding y Margin: /* top, right, bottom, left*/
:root{
	--text-color: #004aad; /* Ej:  color: var(--text-color); */
}

/* ===== Source Sans 3 (self-hosted) — latin, normal ===== */
@font-face{
  font-family:"Source Sans 3";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("/assets/webfonts/source-sans300.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/webfonts/source-sans400.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/webfonts/source-sans600.woff2") format("woff2");
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; user-select: none;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}
body {line-height: 1; -webkit-text-size-adjust: none;}
ol, ul {list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
mark {background-color: transparent; color: inherit;}
input::-moz-focus-inner {border: 0; padding: 0;}
input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */
	@-ms-viewport { width: device-width;}
	@media screen and (max-width: 480px) {html, body { min-width: 320px; }}

html { box-sizing: border-box;}
*, *:before, *:after {
	box-sizing: inherit;
}
body { background: #1b1f22; }
	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

/* Type */
html { font-size: 16pt; }
	@media screen and (max-width: 1680px) {html { font-size: 12pt;}}
	@media screen and (max-width: 736px) {html { font-size: 11pt;}}
	@media screen and (max-width: 360px) {html { font-size: 10pt;}}

body, input, select, textarea {
	color: #ffffff;
	font-family: "Source Sans 3", sans-serif;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.65;
}

a {
	-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	border-bottom:double 0.5px rgba(255, 255, 255, 0.25);
	text-decoration: none;
	color: inherit;
}

a:hover {border-bottom-color: transparent;}
strong, b {color: #ffffff; font-weight: 600;}
em, i {font-style: italic;}
p {margin: 0 0 2rem 0;}
h1, h2, h3, h4, h5, h6 {
	color: #ffffff;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 1rem 0;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: inherit; text-decoration: none;}
h1.major, h2.major, h3.major, h4.major, h5.major, h6.major, h2.h2-intro {
	text-decoration: underline;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: -ms-max-content;	
	padding-bottom: 0.1rem;
	margin: 0 0 0.3rem 0;
}

h1 { font-size: 2.25rem; line-height: 1.3; letter-spacing: 0.5rem; }
h2 { font-size: 1.5rem; line-height: 1.4; letter-spacing: 0.5rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.8rem; }
h5 { font-size: 0.7rem; }
h6 { font-size: 0.6rem; }

@media screen and (max-width: 736px) {
	h1 {
		font-size: 1.75rem;
		line-height: 1.4;
	}
	h2 {
		font-size: 1.25em;
		line-height: 1.5;
	}
}

sub {font-size: 0.8rem;	position: relative;	top: 0.5rem;}
sup {font-size: 0.8rem; position: relative; top: -0.5rem;}
blockquote { border-left: solid 4px #ffffff; font-style: italic; margin: 0 0 2rem 0; padding: 0.5rem 0 0.5rem 2rem; }

code {
	background: rgba(255, 255, 255, 0.075);
	border-radius: 4px;
	font-family: "Courier New", monospace;
	font-size: 0.9rem;
	margin: 0 0.25rem;
	padding: 0.25rem 0.65rem;
	display: block;
	margin-bottom: 0.5em;
	color: transparent;
	background-image: linear-gradient(90deg, #004AAD, #00FF00);
	background-clip: text;
}
pre {
	-webkit-overflow-scrolling: touch;
	font-family: "Courier New", monospace;
	font-size: 0.9rem;
	margin: 0 0 2rem 0;
}
	pre code {
		display: block;
		line-height: 1.75;
		padding: 1rem 1.5rem;
		overflow-x: auto;
	}

hr {
	border: 0;
	border-bottom: solid 1px #ffffff;
	margin: 2.75rem 0;
}
.align-left { text-align: left; }
.align-center {	text-align: center;	}
.align-right { text-align: right; }

/* Form */
	form {margin: 0 0 2rem 0;}
		form > :last-child {margin-bottom: 0;}
		form > .fields {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			width: calc(100% + 3rem);
			margin: -1.5rem 0 2rem -1.5rem;
		}

			form > .fields > .field {
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				padding: 1.5rem 0 0 1.5rem;
				width: calc(100% - 1.5rem);
			}
				form > .fields > .field.half {width: calc(50% - 0.75rem);}
				form > .fields > .field.third {width: calc(100%/3 - 0.5rem);}
				form > .fields > .field.quarter {width: calc(25% - 0.375rem);}

		@media screen and (max-width: 480px) {
			form > .fields {
				width: calc(100% + 3rem);
				margin: -1.5rem 0 2rem -1.5rem;
			}
				form > .fields > .field {
					padding: 1.5rem 0 0 1.5rem;
					width: calc(100% - 1.5rem);
				}
					form > .fields > .field.half {
						width: calc(100% - 1.5rem);
					}
					form > .fields > .field.third {
						width: calc(100% - 1.5rem);
					}
					form > .fields > .field.quarter {
						width: calc(100% - 1.5rem);
					}
		}

	label {
		color: #ffffff;
		display: block;
		font-size: 0.8rem;
		font-weight: 300;
		letter-spacing: 0.2rem;
		line-height: 1.5;
		margin: 0 0 1rem 0;
		text-transform: uppercase;
	}

	input[type="text"],	input[type="password"],	input[type="email"], input[type="tel"], select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border: solid 1px #ffffff;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1rem;
		text-decoration: none;
		width: 100%;
	}
		input[type="text"]:invalid, input[type="password"]:invalid,	input[type="email"]:invalid, input[type="tel"]:invalid, select:invalid,
		textarea:invalid {box-shadow: none;}
		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			background: rgba(255, 255, 255, 0.075);
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23ffffff' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75rem;
		padding-right: 2.75rem;
		text-overflow: ellipsis;
	}
		select option {color: #ffffff; background: #1b1f22;}
		select:focus::-ms-value {background-color: transparent;}
		select::-ms-expand { display: none;	}
	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {height: 2.75rem;}
	textarea {padding: 0.75rem 1rem;}
	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2rem;
		opacity: 0;
		width: 1rem;
		z-index: -1;
	}
		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			color: #ffffff;
			cursor: pointer;
			display: inline-block;
			font-size: 0.8rem;
			font-weight: 300;
			margin: 0 0 0.5rem 0;
			padding-left: 2.65rem;
			padding-right: 0.75rem;
			position: relative;
		}
			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}
			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				-webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				-ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				border-radius: 4px;
				border: solid 1px #ffffff;
				content: '';
				display: inline-block;
				height: 1.65rem;
				left: 0;
				line-height: 1.65rem;
				position: absolute;
				text-align: center;
				top: -0.15rem;
				width: 1.65rem;
			}
		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #ffffff !important;
			border-color: #ffffff !important;
			color: #1b1f22;
			content: '\f00c';
		}
		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			background: rgba(255, 255, 255, 0.075);
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}
	input[type="checkbox"] + label:before { border-radius: 4px;	}
	input[type="radio"] + label:before { border-radius: 100%; }
	::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; }
	:-moz-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; }
	::-moz-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; }
	:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0;	}
	.formerize-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0;	}

/* Box */
	.box {
		border-radius: 4px;
		border: solid 1px #ffffff;
		margin-bottom: 2rem;
		padding: 1.5em;
	}
		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}
		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Icon */
	.icon { text-decoration: none; border-bottom: none;	position: relative;	}
		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}
		.icon > .label { display: none; }
		.icon:before { line-height: inherit; }
		.icon.solid:before { font-weight: 900; }
		.icon.brands:before { font-family: 'Font Awesome 5 Brands'; }

/* Image */
	.image { border-radius: 4px; border: 0; display: inline-block; position: relative; }
		.image:before {
			pointer-events: none;
			background-image: url("../../images/overlay.png");
			background-color: rgba(19, 21, 25, 0.5);
			border-radius: 4px;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0.5;
			position: absolute;
			top: 0;
			width: 100%;
		}
		.image img {border-radius: 5px; display: block;}
		.image.left, .image.right {max-width: 40%;}
			.image.left img, .image.right img {width: 100%;}
		.image.left {float: left; padding: 0 1.5em 1em 0; top: 0.25em;}
		.image.right {float: right; padding: 0 0 1em 1.5em; top: 0.25em;}
		.image.fit {display: block; margin: 0 0 2rem 0; width: 100%;}
			.image.fit img {width: 100%;}
		.image.main {display: block; margin: 2.5rem 0;	width: 100%;}
			.image.main img {width: 100%;}
		@media screen and (max-width: 736px) {.image.main {margin: 2rem 0;}}
		@media screen and (max-width: 480px) {.image.main {margin: 1.5rem 0;}}

/* List */
	ol {list-style: decimal; margin: 0 0 2rem 0; padding-left: 1.25em;}
		ol li {padding-left: 0.25em;}
	ul { list-style: disc; margin: 0 0 2rem 0; padding-left: 1em;}
		ul li {padding-left: 0.5em;}
		ul.alt {list-style: none; padding-left: 0;}
			ul.alt li {	border-top: solid 1px #ffffff; padding: 0.5em 0;}
				ul.alt li:first-child {border-top: 0; padding-top: 0;}
	dl {margin: 0 0 2rem 0;}
		dl dt {display: block; font-weight: 600; margin: 0 0 1rem 0;}
		dl dd {margin-left: 2rem;}

/* Actions */
	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1rem;
		padding-left: 0;
		}
		ul.actions li {padding: 0 0 0 1rem; vertical-align: middle;}
		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}
			ul.actions.special li:first-child {padding-left: 0;}
		ul.actions.stacked {-moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-left: 0;}
			ul.actions.stacked li {padding: 1.3rem 0 0 0;}
				ul.actions.stacked li:first-child {padding-top: 0;}
		ul.actions.fit {width: calc(100% + 1rem);}
			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}
				ul.actions.fit li > * {width: 100%;}
			ul.actions.fit.stacked {width: 100%;}
		@media screen and (max-width: 480px) {
			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}
				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1rem 0 0 0;
					text-align: center;
					width: 100%;
				}
					ul.actions:not(.fixed) li > * {width: 100%;}
					ul.actions:not(.fixed) li:first-child {padding-top: 0;}
					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {	width: 100%;}
						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {margin-left: -0.5em;}
	}

/* Icons */
	ul.icons {cursor: default; list-style: none; padding-left: 0;}
		ul.icons li {display: inline-block; padding: 0 0.5em 0 0;}
			ul.icons li:last-child {padding-right: 0;}
			ul.icons li a {border-radius: 100%;
				box-shadow: inset 0 0 0 1px #ffffff;
				display: inline-block;
				height: 2.25rem;
				line-height: 2.25rem;
				text-align: center;
				width: 2.25rem;
			}
				ul.icons li a:hover {
					background-color: rgba(255, 255, 255, 0.1);
					transform: rotate(360deg); /* Girar el elemento 360 grados */
    				transition: transform 0.8s ease;
				}
				ul.icons li a:active {
					background-color: rgba(255, 255, 255, 0.01);
					height: 2.35rem;
					width: 2.35rem;
				}

/* Table */
	.table-wrapper {-webkit-overflow-scrolling: touch; overflow-x: auto;}
	table {margin: 0 0 2rem 0; width: 100%;}
	table tbody tr {border-bottom: solid 1px #ffffff;}
	table tbody tr:first-child {border-top: solid 1px #ffffff;}
	table tbody tr:last-child {border-bottom: solid 1px #ffffff;}
	table td {padding: 0.75em 0.75em;}
	table th {
		color: #ffffff;
		font-size: 0.9em;
		font-weight: 600;
		padding: 0 0.75em 0.75em 0.75em;
		text-align: left;
	}
	table thead {border-bottom: solid 2px #ffffff;}
	table tfoot {border-top: solid 2px #ffffff;}
	table.alt {border-collapse: separate;}
	table.alt tbody tr td {
		border: solid 1px #ffffff;
		border-left-width: 0;
		border-top-width: 0;
	}
	table.alt tbody tr td:first-child {border-left-width: 1px;}
	table.alt tbody tr:first-child td {border-top-width: 1px;}
	table.alt thead {border-bottom: 0;}
	table.alt tfoot {border-top: 0;}

/* Button */
	input[type="submit"], input[type="reset"], input[type="button"], button, .button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border: 0;
		box-shadow: inset 0 0 0 1px #ffffff;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8rem;
		font-weight: 300;
		height: 2.75rem;
		letter-spacing: 0.2rem;
		line-height: 2.75rem;
		outline: 0;
		padding: 0 1.25rem 0 1.35rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {background-color: rgba(255, 255, 255, 0.075);}
		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {background-color: rgba(255, 255, 255, 0.175);}
		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {margin-right: 0.5em;}
		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {width: 100%;}
		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {font-size: 0.6rem; height: 2.0625rem; line-height: 2.0625rem;}
		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {background-color: #ffffff; color: #1b1f22 !important; font-weight: 600;}
		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {pointer-events: none; cursor: default; opacity: 0.25;}
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button {line-height: calc(2.75rem - 2px);}

/* BG */
	#bg {
		-moz-transform: scale(1.0);
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}
		#bg:before, #bg:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		#bg:before {
			-moz-transition: background-color 2.5s ease-in-out;
			-webkit-transition: background-color 2.5s ease-in-out;
			-ms-transition: background-color 2.5s ease-in-out;
			transition: background-color 2.5s ease-in-out;
			-moz-transition-delay: 0.75s;
			-webkit-transition-delay: 0.75s;
			-ms-transition-delay: 0.75s;
			transition-delay: 0.75s;
			background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png");
			background-size: auto, 256px 256px;
			background-position: center, center;
			background-repeat: no-repeat, repeat;
			z-index: 2;
		}
		#bg:after {
			-moz-transform: scale(1.125);
			-webkit-transform: scale(1.125);
			-ms-transform: scale(1.125);
			transform: scale(1.125);
			-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
			-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
			-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
			transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
			background-image: url("../../images/banner.webp");
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			z-index: 1;
		}
		body.is-article-visible #bg:after {
			-moz-transform: scale(1.0825);
			-webkit-transform: scale(1.0825);
			-ms-transform: scale(1.0825);
			transform: scale(1.0825);
			-moz-filter: blur(0.2rem);
			-webkit-filter: blur(0.2rem);
			-ms-filter: blur(0.2rem);
			filter: blur(0.2rem);
		}
		body.is-preload #bg:before { background-color: #000000; }

/* Wrapper */
	#wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		position: relative;
		min-height: 100vh;
		width: 100%;
		padding: 4rem 2rem;
		z-index: 3;
	}
		#wrapper:before {content: '';	display: block;}
		@media screen and (max-width: 1680px) {#wrapper {padding: 3rem 2rem;}}
		@media screen and (max-width: 736px) {#wrapper {padding: 2rem 1rem;}}
		@media screen and (max-width: 480px) {#wrapper {padding: 1rem;}}

/* Header */
	#header {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		max-width: 100%;
		text-align: center;
	}
		#header > * {
			-moz-transition: opacity 0.325s ease-in-out;
			-webkit-transition: opacity 0.325s ease-in-out;
			-ms-transition: opacity 0.325s ease-in-out;
			transition: opacity 0.325s ease-in-out;
			position: relative;
			margin-top: 3.5rem;
		}
			#header > *:before {
				content: '';
				display: block;
				position: absolute;
				top: calc(-3.5rem - 1px);
				left: calc(50% - 1px);
				width: 1px;
				height: calc(3.5rem + 1px);
				background: #ffffff;
			}
		#header > :first-child {margin-top: 0;}
			#header > :first-child:before { display: none;}
		#header .logo {
			width: 5.5rem;
			height: 5.5rem;
			line-height: 5.5rem;
			border: solid 1px #ffffff;
			border-radius: 100%;
		}
			#header .logo .icon:before {font-size: 2rem;}
		.logo1 {
			width: 3em;
			height: 3em;
			line-height: 5.5rem;
			border: solid 1px #ffffff;
			border-radius: 100%;
			display: flex;
			justify-content: center; /* Centrar horizontalmente */
			align-items: center; /* Centrar verticalmente */
			box-shadow: 0 5px 5px rgba(0, 0, 0, 0.7);
		}
		.logo1 img {/* box-shadow: 7px -1px 7px rgba(0, 0, 0, 0.9); */
			box-shadow: none;
		}
		#header .content {
			border-style: solid;
			border-color: #ffffff;
			border-top-width: 1px;
			border-bottom-width: 1px;
			max-width: 100%;
		}
			#header .content .inner {
				-moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
				-webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
				-ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
				transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
				-moz-transition-delay: 0.25s;
				-webkit-transition-delay: 0.25s;
				-ms-transition-delay: 0.25s;
				transition-delay: 0.25s;
				padding: 3rem 2rem;
				max-height: 40rem;
				overflow: hidden;
			}
				#header .content .inner > :last-child {margin-bottom: 0;}
			#header .content p {
				text-transform: uppercase;
				letter-spacing: 0.2rem;
				font-size: 0.8rem;
				line-height: 2;
			}
		#header nav ul {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			margin-bottom: 0;
			list-style: none;
			padding-left: 0;
			border: solid 1px #ffffff;
			border-radius: 4px;
		}
			#header nav ul li {
				padding-left: 0;
				border-left: solid 1px #ffffff;
			}
				#header nav ul li:first-child {border-left: 0;}
				#header nav ul li a {
					display: block;
					min-width: 7.5rem;
					height: 2.75rem;
					line-height: 2.75rem;
					padding: 0 1.25rem 0 1.45rem;
					text-transform: uppercase;
					letter-spacing: 0.2rem;
					font-size: 0.8rem;
					border-bottom: 0;
				}
				#header nav ul li a:hover {color: #004AAD;}				
				#header nav ul li a:active {background-color: rgba(255, 255, 255, 0.175);} /*Color Click*/				
		ul.icons li a:hover {color: #004AAD;}
		
/*--------------------------------------CAMBIOS PROPIOS------------------------------------------------------------ */
		p a[href="https://www.youtube.com/@nosinformatizamos"] {color: #004AAD;}
		.resource-search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}
		.resource-search input[type="text"] {
			flex: 1;/*Cuadro de búsqueda ocupe todo el espacio restante */
			margin-right: 10px;/*Espacio a la derecha del cuadro de búsqueda */
		}
		#header nav.use-middle:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: calc(50% - 1px);
			width: 1px;
			height: 100%;
			background: #ffffff;
		}
		#header nav.use-middle ul li.is-middle {Border-left: 0;}
		body.is-article-visible #header {
			-moz-transform: scale(0.95);
			-webkit-transform: scale(0.95);
			-ms-transform: scale(0.95);
			transform: scale(0.95);
			-moz-filter: blur(0.1rem);
			-webkit-filter: blur(0.1rem);
			-ms-filter: blur(0.1rem);
			filter: blur(0.1rem);
			opacity: 0;
		}
		body.is-preload #header {
			-moz-filter: blur(0.125rem);
			-webkit-filter: blur(0.125rem);
			-ms-filter: blur(0.125rem);
			filter: blur(0.125rem);
		}
			body.is-preload #header > * {opacity: 0;}
			body.is-preload #header .content .inner {
				max-height: 0;
				padding-top: 0;
				padding-bottom: 0;
				opacity: 0;
			}
		@media screen and (max-width: 980px) {
			#header .content p br {display: none;}
		}
		@media screen and (max-width: 736px) {
			#header > * {margin-top: 2rem;}
				#header > *:before {top: calc(-2rem - 1px); height: calc(2rem + 1px);}
			#header .logo {width: 4.75rem; height: 4.75rem; line-height: 4.75rem;}
				#header .logo .icon:before {font-size: 1.75rem;}
			#header .content .inner {padding: 2.5rem 1rem;}
			#header .content p {line-height: 1.875;}
		}
		@media screen and (max-width: 480px) {
			#header {padding: 1.5rem 0;}
				#header .content .inner {padding: 2.5rem 0;}
				#header nav ul {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
					min-width: 10rem;
					max-width: 100%;
				}
					#header nav ul li {
						border-left: 0;
						border-top: solid 1px #ffffff;
					}
						#header nav ul li:first-child {border-top: 0;}
						#header nav ul li a {
							height: 3rem;
							line-height: 3rem;
							min-width: 0;
							width: 100%;
						}
				#header nav.use-middle:after {display: none;}
		}

/* Main */
	#main {
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		-ms-flex-grow: 1;
		flex-grow: 1;
		-moz-flex-shrink: 1;
		-webkit-flex-shrink: 1;
		-ms-flex-shrink: 1;
		flex-shrink: 1;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		position: relative;
		max-width: 100%;
		z-index: 3;
	}
		#main article {
			-moz-transform: translateY(0.25rem);
			-webkit-transform: translateY(0.25rem);
			-ms-transform: translateY(0.25rem);
			transform: translateY(0.25rem);
			-moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out;
			-webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
			-ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out;
			transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
			padding: 4.5rem 2.5rem 1.5rem 2.5rem ;
			position: relative;
			width: 45rem;
			max-width: 100%;
			background-color: rgba(27, 31, 34, 0.75);
			border-radius: 4px;
			opacity: 0;
		}
			#main article.active {
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
			}
			#main article .close {
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				width: 4rem;
				height: 4rem;
				cursor: pointer;
				text-indent: 4rem;
				white-space: nowrap;
				overflow: visible; /* hidden */
  				font-size: 0; 
			}
				#main article .close:before {
					-moz-transition: background-color 0.2s ease-in-out;
					-webkit-transition: background-color 0.2s ease-in-out;
					-ms-transition: background-color 0.2s ease-in-out;
					transition: background-color 0.2s ease-in-out;
					content: '';
					display: block;
					position: absolute;
					top: 0.75rem;
					left: 0.75rem;
					width: 2.5rem;
					height: 2.5rem;
					border-radius: 100%;
					background-position: center;
					background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
					background-size: 20px 20px;
					background-repeat: no-repeat;
				}
				#main article .close:hover:before {background-color: rgba(255, 255, 255, 0.075);}
				#main article .close:active:before {background-color: rgba(255, 255, 255, 0.175);}
		@media screen and (max-width: 736px) {
			#main article {padding: 3.5rem 2rem 0.5rem 2rem;}
				#main article .close:before {
					top: 0.875rem;
					left: 0.875rem;
					width: 2.25rem;
					height: 2.25rem;
					background-size: 14px 14px;
				}
		}
		@media screen and (max-width: 480px) {#main article {padding: 3rem 1.5rem 0.5rem 1.5rem ;}}

/* Footer */
	#footer {
		-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		width: 100%;
		max-width: 100%;
		margin-top: 2rem;
		text-align: center;
	}
		.copyright {
			letter-spacing: 0.2rem;
			font-size: 0.6rem;
			opacity: 0.75;
			margin-bottom: 0;
			text-transform: uppercase;
			margin-top: 1em;
    		text-align: center;			
		}
		@media (max-width: 768px) { .copyright{font-size: 0.37rem;}}
		.copyright a{ border-bottom: none !important; text-decoration: none !important;}
		.copyright a:hover {color: #004AAD; transition: color 0.5s ease;}
		body.is-article-visible #footer {
			-moz-transform: scale(0.95);
			-webkit-transform: scale(0.95);
			-ms-transform: scale(0.95);
			transform: scale(0.95);
			-moz-filter: blur(0.1rem);
			-webkit-filter: blur(0.1rem);
			-ms-filter: blur(0.1rem);
			filter: blur(0.1rem);
			opacity: 0;
		}
		body.is-preload #footer {opacity: 0;}

.intro-text p {
	text-align: justify;
	margin-bottom: 1.2em;
	font-size: 1.05rem;
}
.intro-text p.intro-final {
	background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.4em;
    padding: 0.5em;
    text-align: center;
    font-style: italic;
    font-size: 1.2em;
	border: 1px outset #004AAD;
	box-shadow: 0 0 8px rgba(0, 74, 173, 0.3);
}

/*Recursos Tabla responsive*/
@media (max-width: 768px) {
    .rtable {display: block; width: 100%;}
    .rtable thead {display: none;}
    .rtable tr {margin-bottom: 10px; display: block;}
	.rtable td {display: block; padding: 3px;}
    .rtable td::before {content: attr(data-label);float: left;clear: left;font-weight: bold;}
	td[data-label]::before {
		margin-left: 1px;		
        padding-right: 5px;		
    }
}

@media (min-width: 641px) {
    #resource-table_length, #resource-table_filter {display: flex; align-items: center;}
	#resource-table_filter label {margin-left: 10px;}
    #resource-table_filter {margin-top: 22px;}
}

/*Recursos*/
.h2-recursos{text-decoration: underline;}
.contact-buttons {margin-top: 10px;}

/*------------------Contacto -Centrar Google reCAPTCHA y Botones Limpiar/Enviar*/
#attachment-label {text-transform: none;}/* Elimina las mayúsculas */
.captcha-container {display: flex;}
.g-recaptcha {
    max-width: 100%;
    margin: 0 auto;/*Centra horizontalmente el captcha*/
}
.contact-buttons {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 0.3em; /*Espaciado entre los botones */
	margin-top: 2rem;
}
.primary {
	background-color: #DDDDDD !important;
	border: 10px solid #DDDDDD; /* Borde inicial */
	transition: background-color 0.3s ease, border 0.3s ease, transform 0.3s ease;
  }
.primary:hover {
	background-color: #F8F8FF !important;
	border-color: #007BFF; /* Borde azul brillante */
	transform: scale(1.01); /* Crecimiento del botón */
}
#response-message, 
#response-error {
    display: none;
	margin-top: 0.625em;
	font-size: 16px;
	text-align: center;
	margin-top: 20px;
}
#response-message {color: #1660c3;}
#response-error {color: #f54021;}
#loading-container {
	display: none;
	color: #004aad;
	font-size: 16px;
	text-align: center;
	margin-top: 20px;
}
/*Spinner*/
#loading-spinner {
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color:#004aad;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
	display: inline-block;
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

@media (max-width: 768px) {
    .contact-buttons {gap: 1rem;}
}

/*---------------------APP-------------------------*/
.app-section{   
    width: 99%;
    margin: 1% auto;
    transform-style: preserve-3d;
    transform: translateZ(100px);
}
.card {
    width: 100%;
    padding: 1% 3%;
    margin-bottom: 1%;
    text-align: justify;
    transform-style: preserve-3d;
    transform: translateZ(100px);
    background-color: #0F172A;
	touch-action: none;
	will-change: transform;
  	backface-visibility: hidden;
  	overscroll-behavior: contain;
}
.card-image {
    width: 100%;
    height: 100%; 
    transform-style: preserve-3d;
    transform: translateZ(100px);
    box-shadow: 7px 10px 5px rgba(0, 0, 0, 0.8);
    border-radius: 6%;
    margin-bottom: 2%;
}
.card-title {
    color: #ffffff;
    font-weight: 600;
    line-height: 1.5;   
    letter-spacing: 0.2rem;
    text-decoration: underline;
    font-weight: bold;    
    transform-style: preserve-3d;
    transform: translateZ(50px);
}
.card-text {
    color: #ffffff;
    font-size: 100%;    
    transform-style: preserve-3d;
    transform: translateZ(50px);
    padding: 5% 5% 3% 5%;
}
.p-app{margin-bottom: -2px;}

/*Recursos*/
.dataTables_filter label {
    display: flex;
    align-items: center;
}
.dataTables_filter label input {margin-right: 10px;height: 2.7em;}
#clearSearchButton {
	margin-left: 10px !important;
	box-shadow: 0 0 0 0.6px #ffffff
}
@media (max-width: 767px) {
    #resource-table tbody tr {margin-top: 10px;}
}
@media (min-width: 767px) {
    #resource-table_filter {display: flex; justify-content: space-between; align-items: center;}
    #resource-table_filter label {margin-right: 3rem;}
    #resource-table_filter input {width: 50%;}
}

@media (max-width: 767px) {
    #resource-table_filter {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
		justify-content: space-between;
        align-items: center;
    }
    #resource-table_filter label {
        margin-bottom: 5px;
        width: 100%; 
        display: flex;
        justify-content: space-between;
    }
	#resource-table_filter label {
        margin-left: 30px;
		margin-bottom: 5px;
		margin-right: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    #resource-table_filter input {
        flex-grow: 1;/*El Input se estira hacia la derecha*/
        margin-left: 2px;
        margin-right: 0x;
		width: 50%; /*Abajo*/
    }
	#clearSearchButton {
        margin-top: 5px;
    }
}

/*Fuente*/
@font-face {
	font-family: 'Noto Color Emoji';
	src: local('Noto Color Emoji'), url('../webfonts/NotoColorEmoji-Regular.ttf') format('truetype');
	font-display: swap;
} 
.emoji {
	font-family: 'Noto Color Emoji', sans-serif;
	font-size: 20px;
	font-style: normal;
}

/*--------------------------------INTRO - YOUTUBE LOGO-------------------------------------*/
.youtube-logo {
    width: 25px;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .youtube-logo {
		width: 20px;
    }
}
@media (max-width: 480px) {
    .youtube-logo {
        width: 15px;
    }
}

/*------------------------------------FAQ, PoliticaPrivacidad, Sorteo, TerminosCondiciones, App-------------------------*/
.link-faq, .link-politica, .link-sorteo, .link-terminos, .link-app {	
	font-size: 0.8em;
	border-bottom: none;
}
.link-faq:hover, .link-politica:hover, .link-sorteo:hover, .link-terminos:hover,  .link-app:hover{
	color: #004AAD;
    text-decoration: none; 
	transition: color 0.5s ease;
}

#faq, #PoliticaPrivacidad, #sorteo, #TerminosCondiciones { max-width: 800px; margin: 2px auto; padding: 0.5em 0.5em 0.5em 0.5em !important; border: 0.5px solid #ddd; font-family: 'Open Sans', sans-serif; box-sizing: border-box; text-align: center; }
#faq h2, #PoliticaPrivacidad h2, #sorteo h2, #TerminosCondiciones h2 {color:#004aad; text-align: center; font-size: 1.2em;}
#faq h3, #PoliticaPrivacidad h3, #sorteo h3, #TerminosCondiciones h3 {color:#7681c9; text-align: center; margin-top:3px; margin-bottom: 1px;}
#faq h4, #PoliticaPrivacidad h4, #sorteo h4, #TerminosCondiciones h4 {color:#bcbee4; margin-bottom:1em; font-size: 11px;}
#faq p, #PoliticaPrivacidad p, #TerminosCondiciones p, #sorteo p, #sorteo ol li, #faq ol li{line-height: 1.6; margin-top:0.1em; margin-bottom: 10px; font-size: 0.9em; text-align: left; padding: 0 0.4em 0 0.4em;}
#faq a, #PoliticaPrivacidad a, #sorteo a, #TerminosCondiciones a {color: #ffffff; text-decoration: none; list-style-type: none; padding: 5px 5px;}
#faq ol {list-style-type: circle; margin: 0; }
#faq a:hover, #PoliticaPrivacidad a:hover, #sorteo a:hover, #TerminosCondiciones a:hover,#intro-enlace-a:hover {color: #004AAD;text-decoration: none !important;transition: color 0.5s ease;}
#faq, #PoliticaPrivacidad, #sorteo, #TerminosCondiciones {background-image: linear-gradient(0deg, #1d1d1d, #002655); color: #fff; padding: 2rem; border-radius: 5px;}

.content-section ul,
.content-section ol{
  list-style: none;     /* sin viñetas (usás emojis y números “1.” en texto) */
  padding-left: 0;      /* quita el indent interno */
  margin-left: 0;       /* quita desplazamiento externo */
  display: block;       /* asegura flujo normal (sin flex) */
}
.content-section li{
  margin-left: 0;
  padding-left: 0;
  text-align: left;
}
.list-center {
  display: flex;
  justify-content: center; /* centra horizontal */
}
.list-center ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  text-align: left; /* mantiene el texto alineado dentro */
}

.flecha-enlace-div {Text-align: center; display: flex; margin-top: 5px; justify-content: center;}
.flecha-container {text-align: center;margin-top: -0.9em;}
.flecha-abajo {
    position: relative;
	margin-top: 2px;
    margin-bottom: 0.5em;
    display: inline-flex; /*Hacer que sea un bloque en línea*/
    align-items: center; /*Centrar verticalmente*/
    justify-content: center;/*Centrar horizontalmente*/
    text-decoration: none !important;
    border-bottom: none;
    transition: transform 0.3s ease, color 0.3s ease;
	padding: 0px !important;
	transform: scale(1.1) translateY(0); 
}
.flecha-abajo:hover {color: #004aad;}
.terminos-enlace-a, .privacidad-enlace-a{padding: 0px !important;}
#cafecito-logo {width: 22px; height: auto; transition: transform 0.5s ease; vertical-align: middle; /*Alinea verticalmente el logo con respecto al texto*/}
#cafecito-texto {
    font-size: 1em;
    text-decoration: none;
    border-bottom: none;
    transition: color 0.5s ease;
}
#cafecito-logo:hover,#cafecito-texto:hover {color: #004AAD;text-decoration: none;transform: scale(1.2);}
#sorteo ul {list-style-type: none;padding: 0;margin: 0;}

/*INTRO*/
.intro-enlace-div{text-align: center;}
#intro-enlace-a {color: #ffffff; display: inline-block; margin-left: 5px;}

/*VIDEO*/
.video-enlace-a{
	height: 3em;
	width: auto;
	border-bottom: none;
	text-decoration: none;
	margin-top: 2em;
    transition: transform 0.3s ease-in-out;
}
.video-enlace-a:hover{transform: scale(1.05);}

.col-lg-12-my-auto{
	width: 100%;
    margin: 0 auto;
    padding: 0;
}
.col-lg-10-mx-auto-py-4{
	width: 100%;
    max-width: none;
}

/* Estilos para el contenedor del menú de navegación */
.nav-container {
    padding-left: 0px;
    padding-right: 0px;
	position: relative;
}

.main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding: 10px 15px;
    border-bottom: 0.5px solid #ffffff;
}
/* Estilos para la lista del menú de navegación */
.main-nav ul {
	padding: 0;
    margin: 0;
    list-style: none;
	text-align: center;
	display: flex;
	justify-content: center;
}

.main-nav ul li {
    display: inline-block;
    margin-right: 5px;
}

.main-nav ul li a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 18px;
    display: block;
    white-space: nowrap;/*Evita que el texto se divida en varias líneas*/
    font-weight: bold;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.main-nav ul li a:hover {	
    background-color: #ffffff;
    color: #004AAD;
	padding: 5px 10px;
}

/*Faq, Politicas, Sorteo, Términos: MENU HAMBURGUESA*/
#mobile-menu {display: none;cursor: pointer;}
#mobile-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: #fff;
}
.bios-list h5.bios-sub{
  font-size: 0.8rem;
  text-align: center;
  margin: 1px;
}
/* === NAV móvil unificado (FAQ, Política, Sorteo, Términos) === */
@media (max-width: 768px){

  /* Botón hamburguesa */
/*   #mobile-menu{
    display: block;
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 20;
    cursor: pointer;
  } */

  /* Menú que EMPUJA el contenido (no absoluto) */
  .main-nav{
    position: static;     /* <- clave */
    display: none;        /* cerrado por defecto */
    margin-top: 8px;
    padding: 6px 10px 6px 56px;   /* ← colchón a la derecha de la X */
    background: transparent;
    overflow-x: auto;              /* una sola fila con scroll si no entra */
    -webkit-overflow-scrolling: touch;
  }
  .main-nav::-webkit-scrollbar{ display: none; }
  .main-nav.active{ display:block; }

  /* Chips: una sola fila (no se parte) y con poco gap */
  .main-nav ul{
    display: flex;
    flex-wrap: nowrap;    /* ← fuerza 1 fila */
    gap: 4px 6px;         /* ← menos espacio entre botones */
    align-items: center;
  }
  .main-nav li{ flex: 0 0 auto; }

  .main-nav a{
    padding: 4px 8px;     /* ← botones más compactos */
    font-size: 12px;
    line-height: 1;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    white-space: nowrap;  /* evita partir el texto dentro del chip */
    background:#002655;
    color:#fff;
    text-decoration:none;
  }
  .main-nav a:hover{ background:#002655; }

  /* El título (hero) queda pegado al nav; el nav ya crea el espacio */
  .nav-container + h2.section-title.hero{ margin-top: 0; }
}

/* ===== Hero unificado ===== */
.section-title.hero{
  display:inline-block;
  margin: 1.2rem auto 0;
  padding: .9rem 1.25rem;
  max-width: 620px;
  text-align: center;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 28px);
  line-height: 1.25;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(35,92,135,.35), rgba(5,25,45,.25));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.28);
}
.section-title.hero::after{
  content:"";
  display:block;
  height:2px;
  width:min(520px, 90%);
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  border-radius:2px;
}

/* flecha */
.flecha-container{ text-align:center; margin:.65rem 0 1rem; }
/*BIOS*/
.bios-list {
    columns: 2; /* Divide la lista en 2 columnas */
    -webkit-columns: 2;
    -moz-columns: 2;
    column-gap: 20px; /* Espacio entre columnas */
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
}
.bios-list li {
    margin-bottom: 5px;
    font-size: 0.8rem;
    border-bottom: 1px solid white;
    padding-bottom: 5px;
	max-width: 70%;
    margin: 0 auto;
}
.bios-title h4 {
    font-size: 1rem;
    text-align: center;
    border-bottom: none;
    padding: 2px 0;
    margin: 0;
}

/* ===== Navegación desktop ===== */
.nav-container{ position: relative; z-index: 5; }

.main-nav ul{
  list-style:none; padding-left:0; margin:0 0 .9rem;
  display:flex; gap:1.25rem; justify-content:center; align-items:center;
}


/*---Menú Hamburguesa---*/
@media (max-width: 768px){
	.nav-container{ 
		position: relative; 
		min-height: 44px;
   		margin-bottom: 0.1em;
	}
	.main-nav li{ list-style: none; }
	.main-nav a{
		display: inli  ne-block;
		font-size: 11px; line-height: 1;
		padding: 4px 6px;
		white-space: nowrap;
		color:#fff; text-decoration:none;
		border:1px solid rgba(255,255,255,.18); border-radius:6px;
		background: transparent;
	}

	#mobile-menu{
		display:block;
		position:absolute; top:10px; left:15px;
		z-index:10;
	}
	.main-nav{
		display:none;
		position:static;
		top:40px; left:0;
		width:100%;
		background: transparent;
		padding:0 8px 0 5px;
		box-sizing:border-box;
	}
	.main-nav.active{
		display:block;
		margin-top: 0.1em;
		border: 0px;
	}
	.main-nav ul{
		flex-wrap:nowrap;
		justify-content:center;
		gap:0.5em;
		overflow:visible;
		margin-top: 3em;
	}
	.main-nav ul li{ 
		margin:0;
		padding:0;
	}
	.main-nav ul li a{
		display:block; text-decoration:none;
		color:#fff;
		font-weight:700;
		font-size:10px;
		line-height:1;
		padding:3px 4px;
		border-radius:6px;
		white-space:nowrap;
		background-color:rgba(255,255,255,.06);
		box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;	
	}
	.main-nav ul li a:hover{ 
		padding:3px 4px;
	}
	#mobile-menu.active .bar:nth-child(2){ opacity:0; }
	#mobile-menu.active .bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
	#mobile-menu.active .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
	.bios-list {
        columns: 2; /*Mantiene la lista en dos columnas*/
        -webkit-columns: 2;
        -moz-columns: 2;
        column-gap: 10px; /*Espacio entre columnas*/
        list-style-type: none; /*Quita el estilo de lista para que se vea mejor*/
        padding: 0;
    }

    .bios-list li {
        break-inside: avoid; /*Evita que los elementos se rompan entre columnas*/
        padding: 5px 0; /* Espaciado entre elementos de la lista */
    }

	.link-app{Margin-left: -25px;}
	.link-app:hover{margin-left: -30px;font-size: 0.3rem;}
}

@media (max-width: 360px){
  #faq .main-nav{ overflow-x: visible; padding-left: 44px; }
  #faq .main-nav ul{
    flex-wrap: wrap !important;
    justify-content: center;
    row-gap: 6px; column-gap: 6px;
	margin-top: 0.5em;
  }
  #faq .main-nav a{
    font-size: 11px;
    padding: 4px 7px;
  }
}
/* Fin Menú Hamburguesa*/
/*------------------------------------FAQ, PoliticaPrivacidad, Sorteo y TerminosCondiciones-------------------------*/

/*Footer*/
.footer-links .separator {
    margin: 0 5px;
}

/*----------------------Recursos----------------------------------*/
#resource-table {
    display: flex;
    flex-direction: column;
    gap: 20px;/*Espacio entre cada fila*/
    width: 100%;
    border-collapse: collapse; /*Combina los bordes de las celdas*/
}
/*FILA de la Tabla*/
#resource-table tbody tr {
    border-bottom: 1px solid #ddd; /*Línea divisoria entre Programas*/
    display: flex;
    flex-direction: column;
}
/*CELDA de la tabla */
#resource-table tbody td {
    padding: 3px; /* Espaciado interno */
    word-wrap: break-word; /* Permite que las palabras se dividan en varias líneas si no caben en una sola línea */
}
/*Encabezados: Nombre, Detalle, Tipo, Fecha, Descargar)*/
#resource-table thead th  { font-weight: bold; font-size: 1em; }/*Negrita*/
/* VALORES de las celdas*/
#resource-table td {font-weight: normal; font-size: 1em; color:#cccccc;}

@media (max-width: 767px) {
    #resource-table tbody td { display: block; }
    #resource-table tbody td:before {
        content: attr(data-label) ": "; /*Agrega el título de la columna antes del contenido*/
        font-weight: bold; /*Negrita*/
        display: block; /*Cada valor aparezca en una línea separada*/
    }
	#resource-table a {
        margin-right: 2px;
        margin-left: 2px;
        font-size: 0.7em;
    }
}

/* Estilo para las etiquetas (Nombre, Detalle, Tipo, Fecha) al principio de cada programa */
#resource-table tbody td[data-label]:before {
    content: attr(data-label) ": ";
    font-weight: bold;
	margin-right: 0px;
	font-size: 1em;
	color: #ffffff;	
}
#resource-table tbody tr:hover {background-color: rgba(15, 15, 15, 0.4);} /*Fondo ligeramente más oscuro*/
#resource-table tbody td[data-label="Detalle"] + td:not([data-label="Tipo"]) {padding-left: 20px;}/*Espacio después de la columna: Detalle*/
#resource-table tbody td[data-label="Detalle"] {text-indent: 0;}/* Eliminar la sangría del primer renglón*/
#resource-table thead {display: none;}/*Ocultar el encabezado de la tabla*/
#resource-table a:hover {color: #004aad;transition: font-size 0.3s ease;}
#resource-table a {margin-right: 10px; margin-left: 5px;}

/*Configuracion para el Header.html*/
	.inner {margin-bottom: 20px;}
	.inner h1 {		
		margin-bottom: 10px;
		font-size: 1.5rem;
		white-space: nowrap;
		text-shadow: 4px 1px 0px rgba(0, 0, 0, 0.9);
	}
	.inner h1 span {color:white;}
	.inner h1 span:last-child {color:#004AAD;}
	.inner p {margin-top: 1em;	}
	#lcp-content {margin-bottom: 5px; margin-top: 2em;}

/*------------------------------------APP Acordeon-------------------------------*/
.accordion-container {width:100%;}
.accordion-title {
	display: flex;
    align-items: center;
    justify-content: space-between; /*Distribuye el contenido entre el espacio disponible*/
    cursor: pointer;
    padding: 15px;
    background-color: #0F172A;
    color: #fff;
    border: 1px solid #444;
    font-size: 12px;
    margin-bottom: 5px;
}
.accordion-icon {
    position: absolute;
    margin-top: 15px;
	margin-left: 10px;      
    right: 10px;
    transform: translateY(-50%);	
}
.accordion-icon i {margin-right: 5px;}
.accordion-content {
    display: none;
    padding: 15px;
    border: 1px solid #444;
    border-top: none;
    line-height: 1; /*Altura de línea para el contenido*/
}
.accordion-content p {margin-bottom: 10px;} /*Espacio entre párrafos*/
.accordion-content ul, .accordion-content ol {padding-left: 15px;} /*Tabulación*/
.accordion-content ul li, .accordion-content ol li {
    margin-bottom: 5px; /*Espacio entre elementos de la lista*/
    padding-left: 30px;
    text-indent: -15px; /*Ajuste para alinear el punto con el texto*/
}
.accordion-content ul {list-style-type: none;}/*Elimina el estilo de la lista de puntos (•)*/
.accordion-content ol {list-style-type: none;} /*Elimina el conteo numérico*/
.accordion-content a {
    color: inherit; /*Hereda el color del texto del contenedor*/
    transition: color 0.5s ease;
    font-size: 16px;
}
.accordion-content a:hover {color: #004aad;}
#parrafoSubido {margin-top: -25px;}

@media (max-width: 768px) {
    .accordion-title {
        font-size: 9px;
        padding-right: 40px; /* Ajusta el padding para dar espacio al ícono*/
        display: flex; /* Alinear ícono verticalmente*/
        align-items: center; /*Centrar verticalmente los elementos dentro de .accordion-title*/
    }
    .accordion-icon {
        margin-left: auto; /*Empujar el ícono a la derecha*/
        right: 10px; /*Ajustar la posición del ícono a la derecha*/
    }
	.accordion-content a { font-size: 12px; } /* Tamaño de fuente base*/	
	.accordion-content a:hover { font-size: 14px; } /* Aumenta el tamaño al pasar el mouse*/
}

/*Reducir el espacio bajo los enlaces de las aplicaciones APK*/
.accordion-content ul{margin-bottom: 10px}
.accordion-content ol {margin-bottom: 30px;}

/*Acordeon: Cartel de Advertencia*/
.advertencia {
	padding: 0.5em;
	border: 0.1px solid #dc3545;
	border-radius: 5px;
	margin-bottom: 15px;
	margin-top: 10px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.advertencia h5 {
	margin-bottom: 1em;
	text-align: center;
}
.advertencia p {
	font-size: 12px;
	line-height: 1.4;/*Espaciado entre líneas*/
	margin-bottom: 2px;
	font-style: italic;
	margin-top: -10px;
}
.note {
    font-size: 0.9em;
    font-style: italic; /* Cursiva */
    margin-top: 10px;
    color: #ffffbf;
}

/* --- Badge Google Play (limpio) --- */
.playstore-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  margin:20px 0;
}
.playstore-icon strong {
  font-size: 1rem;
  font-weight: 600;
  color: #f1f1f1;
}

.playstore-icon a{
  line-height:0;
  border:0;
  border-bottom: none !important; /* anula el subrayado global de <a> */
  cursor:pointer;
}

.playstore-icon img{
  height:60px;        /* tamaño del badge */
  width:auto;
  display:block;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  border-radius: 12px;
}

.playstore-icon a:hover img{ transform: translateY(-1px) scale(1.03); }
.playstore-icon a:active img {
  transform: scale(0.95);
  filter: brightness(1.2);
  animation: pulse 0.4s ease;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

@media (max-width:480px){
  .playstore-icon img{ height:48px; }
}

.accordion-content-img {	
	display: flex;
	justify-content: center;
    gap: 1px;
    flex-wrap: wrap;
}
.image-ar1, .image-ar2, .image-ar3, .image-ar4{
    max-width: 40%;
    height: auto;
    border-radius: 15px;
	padding: 5px;
	transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform-origin: 50% 50%;
}
.image-ar1:hover,.image-ar2:hover,.image-ar3:hover,.image-ar4:hover {
	zoom: 70%;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);	
}
.image-ar1:active{
	transform: translate(50%, 50%) scale(1.8);
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.9);
}
.image-ar2:active{
	transform: translate(-50%, 50%) scale(1.8);
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.9);
}
.image-ar3:active{
	transform: translate(50%, -50%) scale(1.8);
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.9);
}
.image-ar4:active{
	transform: translate(-50%, -50%) scale(1.8);
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.9);
}

/*------------------------------------PANTALLAS-------------------------*/
@media screen and (max-width: 480px) {
    /* Estilos para pantallas pequeñas como móviles */
}
@media screen and (max-width: 768px) {
    /* Estilos para tablets y dispositivos de tamaño similar */
}
@media screen and (min-width: 1024px) {
    /* Estilos para pantallas de escritorio */
}
@media screen and (min-width: 1200px) {
    /* Estilos para pantallas grandes como monitores de alta resolución */
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    /* Estilos para dispositivos entre 481px y 768px de ancho */
}
@media screen and (orientation: landscape) {
    /* Estilos para pantallas en modo horizontal */
}

/* Tooltip data-title */
a[data-title] {
    position: relative;
    cursor: pointer;
    text-decoration: none; 
}
/* Tooltip Responsivo */
a[data-title]:hover::after {
    content: attr(data-title);
    position: absolute;
    top: 125%; /*Posiciona el tooltip debajo del enlace */
    left: 50%;
    transform: translateX(-50%);
    background-color: #004aad;
    color: #ffffff;
    padding: 0.3em 0.5em;
    border-radius: 0.4em;
    white-space: nowrap; /*Evita que el texto se divida en varias líneas*/
    font-size: 0.7rem;
    font-weight: 500;
	line-height: 1; /*Reduce la altura del texto a la mitad*/
	max-height: 2em; /*Establece una altura máxima a la mitad*/
	overflow: hidden; /*Oculta el contenido que excede esta altura*/
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Flecha responsiva */
a[data-title]:hover::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0.4em 0.4em 0 0.4em;
    border-style: solid;
    border-color: #004aad transparent transparent transparent; /* Flecha azul hacia abajo */
    z-index: 10;
    opacity: 0;
	transition: opacity 0.5s ease-in-out 0.2s;
}
/* Mostrar tooltip y flecha */
a[data-title]:hover::after,
a[data-title]:hover::before {
    opacity: 1;
}
/*Tooltip*/
@media (max-width: 600px) {
    a[data-title]:hover::after {
        font-size: 0.6rem;
        padding: 0.2em 0.4em;
    }
    a[data-title]:hover::before {
        border-width: 0.3em 0.3em 0 0.3em;/*Tamaño de la flecha*/
    }
}

/*---------------Footer - Sorteo------------------- */
.form-group {margin-bottom: 1em;}
label {display: block; margin-bottom: 0.1em;}
input[type="text"],
input[type="email"],
input[type="file"] {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#form-sorteo {margin-bottom: 0.1em;}
.btn-participar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em auto 0.5em;
    padding: 0em 1em;
    background-color:  var(--text-color); 
    color: #fff;
    border: none; /*Sin borde*/
    border-radius: 4px;
    cursor: pointer; /*Cambia el cursor al pasar sobre el botón*/
    font-size: 1em;
    height: 40px; /*Altura del botón para centrar mejor el texto*/
	margin-bottom: 0px;
}
.btn-participar:hover {background-color: #0e3d7d;}
.info-imagen {
    display: block; /* Hace que el span ocupe toda la línea */
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #555;
}
#mensaje-error, #mensaje-exito {
    display: none; /* Ocultamos por defecto */
    padding: 10px;
    border-radius: 5px;
    margin-top: 15px;
    text-align: center;
}
#mensaje-error {
    color: red;
    background-color: #f8d7da;
    border: 1px solid red;
}
#mensaje-exito {
    color:blue;
    background-color: #d1ecf1;
    border: 1px solid blue;
}

/*-----------------INTRO-------------imagen principal */
.image.main {
    width: 100%;
    max-width: 100%; /*Que no se expanda más allá del tamaño del contenedor*/
    height: auto; /*Altura fija del contenedor*/
    overflow: hidden; /*Para recortar cualquier contenido que se desborde*/
    position: relative; /*Para posicionar correctamente los elementos internos*/
}

.image.main img#intro-image {
    width: 100%; /*Ajusta el ancho de la imagen al contenedor*/
    height: 100%; /*Se ajustará automáticamente la altura según el ancho*/
    object-fit: cover; /*Ajusta la imagen para cubrir todo el contenedor*/
    transition: opacity 3s ease-in-out;
}

/*---------------VIDEOS  2.embed__conttainer REPETIDO?-----------------*/
.embed__conttainer {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}  
.embed__container {
	position: relative;
	padding-bottom: 56%;
	width: 100%;
	text-align: left;
	background-color: #000000;
}  
.embed__container iframe {
	width: 100%;
	position: absolute;
	height: 100%;
	overflow: hidden;
}  
#player {width: 100%;}  
.owl-nav>div {
	margin-top: -20px;
	position: absolute;
	top: 45%;
	color: #d8d8d8;
	padding: 0px;
	width: 46px;
	display: initial;
	height: 46px;
	border-radius: 50px;
	background: #060606a8;
}
.owl-nav>div:hover {Color: #ffffff;background: #000000;}  
.owl-nav>div.disabled {color: #ffffff00; background: #63636300;}
.owl-nav i {font-size: 20px;margin: 13px 18px;}
.owl-nav .owl-prev {left: -23px;}
.owl-nav .owl-prev i:hover {transition: all 0.3s ease-in-out;}
.owl-nav .owl-next i:hover {transition: all 0.3s ease-in-out;}
.owl-nav .owl-next {right: -23px;}
.owl-carousel .owl-item .video-thumb.active:before {
	opacity: 1;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
	left: 0;
	top: 0;
	background: rgba(0, 74, 173, 0.75);
	z-index: 1;
	transition: all 250ms ease-out;
}
.owl-carousel .owl-item .video-thumb:not(.active):hover:before {
	opacity: 1;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
	left: 0;
	top: 0;
	background: rgba(255, 181, 82, 0.5);
	z-index: 1;
	transition: all 1s ease-out;
}
.video-thumb:after {
	content: "\f144";
	font-family: "Font Awesome 5 Free";
	top: 50%;
	left: 50%;
	margin: -0.458em 0 0 -0.500em;
	color: rgba(255, 255, 255, 0);
	font-size: 2em;
	line-height: 1;
	position: absolute;
	font-weight: 900;
	transition: all 250ms ease-out;
}
.video-thumb.active:after {color: rgba(255, 255, 255, 1);}
.owl-carousel .owl-item img {position: relative;}
#player .ytp-expand-pause-overlay .ytp-pause-overlay {display: none !important;}
#playerWrap {display: inline-block;position: relative;}
#playerWrap.shown::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	cursor: pointer;
	background-color: black;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 64px 64px;
	background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}
.loading__text__player {left: 50%;top: 50%}
.video-title-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
#current-video-title {
	color: var(--text-color);
    font-size: 1.2em;
    width: 100%;
    min-height: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0.4em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 0.1em;
    border: 1px outset #004AAD;
    box-shadow: 0 0 8px rgba(0, 74, 173, 0.3);
}

#current-video-title:hover {
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 12px rgba(0, 74, 173, 0.5);
}
/*---------------------Sorteo - Boton Copiar--------*/
.copy-message {
    font-size: 0.9em;
    color: var(--text-color);
    margin-left: 10px;
    animation: fadeInOut 3s ease-in-out;
}
@keyframes fadeInOut {
    0% {opacity: 0;}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0;}
}
.sorteo-link {
    text-decoration: none !important;
    border-bottom: none !important;
	margin-left: 0.3em;
}
.sorteo-link i {
    text-decoration: none !important;
    border-bottom: none !important;
}
.sorteo-link:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}
#form-sorteo {
    max-width: 700px; /*Ancho máximo del  Formulario*/
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
	border: 1px solid #ccc;
}
#form-sorteo .form-group input, #form-sorteo .form-group select {
    width: 97%;
	margin: 0 auto;
    padding: 10px;
    border-radius: 5px;
    border: 0.01em solid #ccc;
	display: block;
}
.form-group label {
    color: #f1f1f1;
}
/* Select */
#contenido {color: #888;}/*Opción seleccionada inicialmente*/
#contenido.valid {color:#fff;} /*Blanco cuando hay una opción seleccionada */
#contenido option:disabled {color:#888;} /*Opción Deshabilitada */
#contenido:focus {color: #fff;} /*Cambia a blanco cuando se selecciona una opción */
@media screen and (max-width: 768px) {
    #form-sorteo {max-width: 90%;}
}

/* -------- NOTA PRINCIPAL -------- */
.featured-note {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 5px;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Mantiene el contenido en columna */
    align-items: center; /* Centra todos los elementos horizontalmente */
	overflow: hidden; /* Evita que el contenido sobresalga */
	position: relative;
}

.note-title {
    position: absolute; /* El título se posiciona sobre la imagen */
    font-size: 0.75rem;
    background-color: rgba(0, 0, 0, 0.2); /* Fondo translúcido para que el título sea legible */
	backdrop-filter: blur(3px); /*efecto vidrioso*/
    color: white;
    padding: 10px;
	text-align: center;
    z-index: 1; /* Asegura que esté por encima de la imagen */
    border-radius: 8px;
    box-sizing: border-box; /* Incluye padding en el cálculo del ancho */
	width: 100%;
	text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.9);
}

/* Contenedor de la imagen */
.note-image-container {
	position: relative;
	margin-top: 0; /*Sin separación entre el título y la imagen */
	width: 100%;
	overflow: hidden; /* Evita que el contenido se salga del contenedor */
	border-radius: 8px;
}

.note-image {	
	width: 100%;
	height: auto;
	display: block;
	margin-top: 0;
	border-radius: 8px;
	max-width: 100%;
	object-fit: cover;
}

.note-image:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	border-radius: 8px;
}

.note-meta {
    display: flex; /*Misma línea*/
    justify-content: space-between; /*Separar la categoría y la fecha*/
    width: 100%;
    padding-top: 5px;
	box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.3);
}
.note-category {
    font-size: 0.9rem;
    color: #888;
    margin: 0;
    padding: 0;
    white-space: nowrap;
	margin-left: 8px;
    line-height: 1.2;
}
.fav-star {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    color: gold;
    font-size: 1.2em;
    transition: transform 0.2s;
    line-height: 1.2;
}
.fav-star:hover {
    transform: translateX(-50%) scale(1.1);
}
.fav-star::after {
  content: attr(data-title);
  position: absolute;
  bottom: 125%; /* Aparece arriba de la estrella */
  left: 50%;
  transform: translateX(-50%);
  background: #004AAD;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  font-size: 0.75em;
  z-index: 10;
}

.fav-star:hover::after {
  opacity: 1;
  pointer-events: auto;
}

.note-date {
    font-size: 0.9rem;
    color: #888;
    margin: 0;
 	line-height: 1.2; /*Espacio entre líneas */
	position: absolute;
	right: 1rem;
	white-space: nowrap;
}

.note-content {
    font-size: 0.95rem;
    max-height: 40em; /*Altura máxima del contenido*/
    overflow-y: auto; /*Barra de desplazamiento vertical cuando es necesario*/
	padding: 10px; /* Espacio para la barra de desplazamiento */    
    line-height: 1.75; /*Espaciado entre líneas para mejor legibilidad*/	
	margin-bottom: 5px;
	box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.3);
	font-family: 'Roboto', sans-serif;
    transition: max-height 0.3s ease; /* Transición suave al expandirse o colapsarse */
}

/*Barra de desplazamiento*/
.note-content::-webkit-scrollbar {width: 10px;}
.note-content::-webkit-scrollbar-thumb {
    background-color: #888; /* Color del pulgar de la barra de desplazamiento */
    border-radius: 4px; /* Bordes redondeados para el pulgar */
}
.note-content::-webkit-scrollbar-thumb:hover {background-color: #555;}

.nota-cita {
  border-left: 5px solid #004aad;
}

/* Estilos específicos para el botón de compartir */
.share-button {
	display: block;
	margin: 0.5em auto;
	padding: 0em 0.5em;
	font-size: 0.7em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border: none;
	transition: color 0.5s ease;
}

.share-button:hover {
  	color: #004AAD !important;
	background-color: transparent !important;   
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

.share-button i {
	margin-left: 0.4em;
	color: inherit;/* hereda el color del botón */
}

/* -------- LISTA DE NOTAS ANTERIORES -------- */
.notes-container {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 5px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 100%; 
}
 .news-ticker {
    border: 1px solid #ddd;
    border-radius: 8px; 
    padding: 5px;
}
.news-item {
    display: flex; /* Utiliza flexbox para organizar elementos en filas */
    align-items: center; /* flex-start Alinea los elementos al inicio */
    padding: 5px;
	border-top: 1px solid #ccc;
}
.news-item:first-child {
    border-bottom: none; /* Elimina el borde superior del primer item */
	margin-top: 0.6em;
}
.news-item:last-child {
	border-bottom: 1px solid #ccc;
}

.news-image {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	transition: transform 0.6s ease-in-out;
    transform-origin: center center;
}
.news-image:hover{
	/* transform: scale(1.1); */
	transform: rotate(360deg) scale(1.2);
}
.news-content {
	position: relative;
    display: flex;
    flex-direction: column; /*Mantiene la fecha y el título en columna*/
    flex-grow: 1;
}
.news-title-container {
    display: flex; /* Flexbox para organizar título y botón en una fila*/
    justify-content: space-between; /* El título y el botón en los extremos*/
    align-items: center; /* Alinea verticalmente los elementos*/
    margin-top: 5px;
    margin-bottom: 10px;
}
.news-header {
    display: flex; /*Flexbox para organizar la categoría y la fecha*/
    justify-content: space-between; /*Espacio entre la categoría y la fecha*/
    align-items: center; /*Alinea verticalmente la categoría y la fecha*/
    margin-bottom: 5px;
}
.news-category { 
	font-size: 0.9em;
    color: #777;
}
.news-date {
	font-size: 0.9em;
    color: #777;
    margin-left: 10px;
    white-space: nowrap;/*Evita que la fecha salte de línea*/
}
.news-title {	
    color: #bbb;
    font-weight: bold;
	white-space: normal;   
    overflow: hidden; 
    text-overflow: ellipsis; 
	z-index: 1;
	display: flex; /*Permite alinear el título y el botón*/
    justify-content: space-between; /*Espacio entre el título y el botón*/
    align-items: center; /*Alinea verticalmente el título y el botón*/
	font-size: 0.7rem;
    margin-right: 5em;
}
.news-ticker .news-item .news-header {
    margin-bottom: -1.875rem; /*Reduce el espacio entre la categoría, la fecha y el título*/
}
.leer {
    background-color: #333;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;    
    white-space: nowrap; /* Evita que el botón salte de línea */
}
.leer:hover {background-color: #444;}
.leer-mas {
    position: absolute;
    right: 0;
	margin-top: 1.6rem;
    font-size: 0.8rem;
    cursor: pointer;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;    
}
.leer-mas:hover {background-color: #444;}
.news-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.3em 0;
}
#note-before{
	margin-bottom: 0em;
    margin-left: 0.3em;
}

/* -------- PAGINACION -------- */
.pagination {
    display: flex;
    justify-content: center; /* Centra los botones */
    margin-top: 12px;
}
#pagination-numbers {
    display: flex;
    align-items: center; /* Centra verticalmente */
}
#pagination-numbers .page-number {
    margin: 0 5px; /* Espacio entre los números */
    font-size: 0.6em;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #fff;
    border-radius: 4px;
    background-color:transparent;
    color: #fff;
    transition: background-color 0.3s ease;
}
#pagination-numbers .page-number:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
#pagination-numbers .page-number.active {
    font-weight: bold;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
}
#prev-btn, #next-btn {
    margin: 0 5px;
    padding: 0;
    width: 2.8rem;
    border-radius: 4px;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.6rem;
    transition: background-color 0.3s ease; /*Transición para el fondo*/
    display: flex; /*Para centrar el contenido*/
    align-items: center; /*Centra verticalmente*/
    justify-content: center; /*Centra horizontalmente*/
}

#prev-btn:hover, #next-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
/* Deshabilitar botones prev y next */
#prev-btn.disabled, #next-btn.disabled {
    background-color: rgba(255, 255, 255, 0.1); /* Fondo deshabilitados */
    color: rgba(255, 255, 255, 0.5); /* Color deshabilitados */
    cursor: not-allowed; /* Cambia el cursor a no permitido */
}
.page-btn.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    pointer-events: none; /* Desactiva el clic en el botón activo */
}

#scroll-to-top {
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px auto 1px auto;
	border-radius: 50%;
	padding: 0.75em 0.75em 0.75em 0.9em;	
	font-size: 1.1em;
	cursor: pointer;
	transition: background-color 0.3s;
	border: 1px solid rgba(255, 255, 255, 0.1);
	width: 2em;
	height: 2em;
	box-sizing: border-box;
}

#scroll-to-top:hover {
	background-color: #333;
	color: #004AAD !important;
}

@media (min-width: 1681px) {
	.leer-mas {margin-top: 1.4rem;height: 2.2rem;}
	.note-meta{display: block;}
}

/* Ajustes generales para dispositivos móviles */
@media (max-width: 768px) { 
	.note-content{max-height: 300px;}
	.news-title{font-size: 0.55em;margin-right: 30em;}
    .news-item {
        display: flex;/* Mantiene los elementos en una fila */
        flex-direction: column;
        align-items: flex-start;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .news-date, .news-category {
        font-size: 0.75em;
        text-align: right;
    }
	.news-date{
		position: absolute;
		right: 4rem;
	}
    .news-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
		transform: translateY(10%);
    }
    .news-content {
        display: flex; /*Mantiene el título y el botón en una fila */
        flex-direction: column; /*Cambia a columna para apilar verticalmente*/
        align-items: flex-start; /*Alinea todo a la izquierda*/
		position: absolute;
        margin-left: 3.6rem;
    }
	.note-image {max-width: 100%;}
	.note-title {font-size: 0.65rem;}
	.leer-mas{
		display: flex;
		margin-right: 3.3rem;
		margin-top: 1.4rem;
		height: 2rem;
		align-items: center;
	}
}

@media (min-width: 601px) and (max-width: 736px) {
	.news-date {margin-left: 14rem;}
}
/* Ajustes adicionales para pantallas más pequeñas (teléfonos móviles) */
@media (min-width: 480px) and (max-width: 600px) {
    .note-title {font-size: 0.6rem;}
	.leer-mas{margin-top: 1.5rem;margin-right: 3rem;}
	.news-title{letter-spacing: normal;}
	.news-date, .news-category{margin-bottom: 1.8rem;right: 3.8srem;}
	.note-date{margin-left: 10rem;}
}
@media (max-width: 479px) {
	.note-category, .note-date, #search-input{font-size: 0.8rem;}	
	.news-item{padding-bottom: 1rem;}
	.note-date{margin-left: 1.9rem;}
	.leer-mas{margin-top: 2.5rem;height: 1.7rem;margin-right: 2.6rem;}
	.news-date{margin-left: 2.2rem;right: 3rem;}
	.news-title{margin-right: 7rem;font-size: 0.5rem;line-height: 1;padding-left: 0.2rem;}
	.news-ticker{padding: 5px;}
}
@media (max-width: 359px) {
	.leer-mas{margin-top: 3rem;height: 1.7rem;}
}
#search-input{width: 60%; height: 1.5em;}
#search-input:focus {border-color: #004aad;}
.image.main {margin-top: 0;padding-top: 0;}
h2.h2-intro{margin-bottom: -2em;}
#canvas-intro {
  display: block;
  /* height: auto; */
  max-width: 100%;
  box-sizing: border-box;    /* el width respeta paddings/bordes del contenedor */
  margin: 0 auto !important; /* evita márgenes raros heredados */
  image-rendering: auto;
  height: 190px!important;
}
.copiable {
    user-select: text !important; /*Permite la selección de texto*/
    -webkit-user-select: text !important; /*Soporte basados en WebKit*/
    -moz-user-select: text !important; /*Soporte Firefox*/
	font-size: 12px;
	border: 1px solid #ccc;
    padding: 5px;
    border-radius: 10px;
}
@media (max-width: 600px) {
    .copiable {font-size: 10px;margin: 0em;padding: 0em;}
}

#contador-visitas-contenedor {
    display: flex;
    align-items: center;
	justify-content: center; 
    gap: 5px;
	margin-top: 0.3em;
}

/* Número del contador */
#contador-visitas-numero img {
    height: 18px;
    width: auto;
	filter: contrast(1.2) brightness(1.1) saturate(1.1); /*Contraste, brillo y saturación*/
    image-rendering: optimizeQuality; /*Mejora la calidad de la imagen*/
}
.fas.fa-users {
    font-size: 16px;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
    top: -5px;
}
@media (max-width: 768px) {
	#contador-visitas-numero img {height: 16px;}
    .fas.fa-users {font-size: 14px;}
	#search-input{width: 38%;}
}
@media (max-width: 480px) {
	#contador-visitas-numero img {height: 14px;}
    .fas.fa-users {font-size: 12px;margin-top: 0.25em;}	
}

#rss{
	padding: 1px;
    height: 2em;
    width: 2em;
    vertical-align: middle;
    display: inline-flex;  /* Cambié a flex para asegurar la alineación correcta */
    justify-content: center;  /* Centra el contenido horizontalmente */
    align-items: center;  /* Centra el contenido verticalmente */
    cursor: pointer;
	position: relative;
	height: 1.8em;
}
a.rss-subscribe {border: none !important;}
i.fas.fa-rss{
	font-size: 1.1em;
    color: #FFFFFF;
    height: 100%;
    width: 100%;
    display: flex;  /* Usamos flex para asegurar la alineación dentro del contenedor */
    justify-content: center;
    align-items: center;
}
#rss i {transform: translate(10%, 5%);}
#rss i:hover{color: #004AAD;}
#rss:hover {
    background-color: transparent;  /* No afecta el hover */
}

/* Carrousel Publicidad*/
.swiper {
	width: 100%;
	max-width: 18.75em;	/*275px*/
	margin: 10px auto;
	background-color: rgba(249, 249, 249, 1); /*Fondo con transparencia*/
	border-radius: 3px;
	opacity: 0.8;
	border: 1px solid #fff;
}

@keyframes gentleFloat {
	0% { transform: translate(0, 0); }  /* Posición inicial (centro) */
	20% { transform: translate(0.5%, -1%); }  /* Arriba derecha */
	40% { transform: translate(1%, 1.5%); }  /* Abajo derecha */
	60% { transform: translate(-0.5%, 1%); }  /* Abajo izquierda */
	80% { transform: translate(-1%, -0.5%); }  /* Arriba izquierda */
	100% { transform: translate(0, 0); }  /* Vuelve al centro */
}
.swiper-slide {
	width: auto;
	min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	animation: gentleFloat 6s ease-in-out infinite;
}

.swiper-slide img {
	width: 100%;
    height: auto;
    display: block;
	border-radius: 3px;
	opacity: 0.8;
	transition: opacity 0.3s ease, transform 2.5s ease-in-out;
	object-fit: contain;/*Evita que la imagen se deforme o se pegue a los bordes*/
}

.swiper:hover .swiper-slide img, .swiper-slide img:hover {opacity: 1;transform: scale(1.05);}

/*Paginación del Swiper */
.swiper-pagination-bullet {background-color: #575757;opacity: 0.8;}
.swiper-pagination {--swiper-pagination-bottom: 2px;}
.swiper .swiper-pagination-bullet:hover {background-color: #464646;opacity: 0.8;}
.swiper-pagination-bullet-active {background: #004aad;opacity: 1;}

@media (max-width: 768px) {
	.swiper {
		max-width: 10.46em; /*175px*/
	  	margin: 10px auto;
	}
	.swiper-slide img {opacity: 0.9;}
	.swiper-pagination {--swiper-pagination-bottom: 2px;}
}

#main article .close {
    overflow: visible; /* para que no corte el tooltip */
    text-indent: 4rem; /* mantiene escondido el texto interno */
}

/* Tooltip Escape debajo de la X */
#main article .close:hover::after {
  content: "Esc";
  position: absolute;
  top: 3.4rem; /* justo debajo de la X */
  left: 50%;             /* centrado respecto al botón */
  transform: translateX(-50%);
  display: inline-block;
  width: max-content;
  background:rgba(255, 255, 255, 0.075);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  text-indent: 0;
  pointer-events: none;
  z-index: 10000;
}
@media (hover: none) {
  #main article .close::after {
    display: none !important;
  }
}

/* Historial: layout con botones centrados */
#notas .news-header-container{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* izq: título | centro: botones | der: buscador */
  align-items: center;
  gap: 12px;
}

/* Botonera centrada */
#notas .news-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;           /* separación entre RSS y Cafecito */
}

/* Buscador a la derecha */
#notas #search-input{ justify-self: end; }

/* Quitar subrayado de <a> en los iconos */
#notas .news-header-container a{ border-bottom: 0; }
/* Notas - móvil: Título arriba; fila 2 = botones (30%) + buscador (70%) */
@media (max-width: 768px){
  #notas .news-header-container{
    display: grid;
    grid-template-columns: 30% 70%;
    grid-auto-rows: auto;
    column-gap: 8px;
    row-gap: 8px;
    align-items: center;
  }

  /* Título "Historial" ocupa toda la primera fila */
  #notas #note-before{
    grid-column: 1 / -1;
  }

  /* Botonera (RSS + Cafecito) a la izquierda */
  #notas .news-actions{
    grid-column: 1;
    justify-content: flex-start;
    padding-left: 6px; /* pequeño margen interno izquierdo */
  }

  /* Buscador a la derecha ocupando su 70% y sin desbordar */
  #notas #search-input{
    grid-column: 2;
    justify-self: end;
    width: calc(100% - 8px); /* deja margen interno derecho */
    margin-right: 8px;
    box-sizing: border-box; /* incluye borde en el cálculo del ancho */
    min-width: 0;           /* evita overflow en grid */
	height: 1.7em;
  }
}

/* ==== Videos (mejoras de rendimiento/estabilidad) ==== */

/* Contenedor 16:9 para el iframe de YouTube */
.embed__container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.embed__container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Carrusel: fallback de altura mínima (refuerza el JS) */
.owl-stage-outer {
  min-height: 120px;
}

/* Miniaturas: evitar saltos y asegurar proporción */
.owl-carousel .item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3; /* hqdefault 480x360 */
  object-fit: cover;
}

/* Clickable + accesibilidad básica */
.item.video-thumb { cursor: pointer; }
.item.video-thumb:focus { outline: 2px dashed #888; outline-offset: 2px; }

/* ----- Título actual del video ----- */
/* Wrapper: altura fija para dos líneas y centrado vertical */
.video-section .video-title-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;       /* centra vertical */
  min-height: calc(2 * 1.35em + 0.5rem) !important;
  margin-top: .5rem !important;
  text-align: center !important;
}
/* Texto: 1–2 líneas con elipsis */
/* Texto: admite 1 o 2 líneas con elipsis */
.video-section .video-title-wrapper #current-video-title {
  font-weight: 600;
}
/* Nav del carrusel: que no empuje layout al aparecer */
.owl-nav { display: flex; gap: .5rem; align-items: center; }
.owl-nav button { line-height: 1; }

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .owl-carousel, .owl-carousel * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Forzar ancho completo del carrusel en desktop */
.video-section .owl-carousel {
  width: 100% !important;
  max-width: 100% !important;
}
.video-section .owl-stage-outer {
  min-height: 120px;
}

@media (max-width: 768px){
  .video-section .owl-stage-outer {
    margin-bottom: 0.2rem !important; /* mucho menos espacio */
	min-height: 60px !important; /* antes era 120px */
  }
  .video-section {
    padding-bottom: 0.1rem;
  }
  .video-enlace-a{
	height: 2.5em;
  }
  #current-video-title{
	font-size: 1em;
  }
}

.image.main img[src$="banner.webp"] {
  aspect-ratio: 1625 / 768;
  width: 100%;
  height: auto;
  display: block;
}

/* Swiper: layout estable para reducir reflows */
.swiper { width: 100%; max-width: 480px; margin: 0 auto; }
.swiper-wrapper, .swiper-slide { height: 100%; }

/* Desktop / tablet: 2:1 sin recorte visible */
@media (min-width: 481px){
  .swiper { aspect-ratio: 2 / 1; height: auto; }
  .swiper-slide img{
    display:block; width:100%; height:100%; object-fit: cover;
  }
}

/* Móvil: menos alto y que NUNCA recorte */
@media (max-width: 480px){
  .swiper { height: 180px; }
  .swiper-slide { display:grid; place-items:center; }
  .swiper-slide img{
    max-width:100%; max-height:100%;
    width:auto; height:auto; object-fit: contain;
    display:block;
  }
}