/* FUENTES */

@font-face {
    font-family: 'CenturyGothic';
		src: url('../fonts/CenturyGothic.eot');
		src: url('../fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/CenturyGothic.woff2') format('woff2'),
			 url('../fonts/CenturyGothic.woff') format('woff'),
			 url('../fonts/CenturyGothic.svg#CenturyGothic') format('svg');
}
@font-face {
    font-family: 'Fluff';
		src: url('../fonts/FluffRegular.eot');
		src: url('../fonts/FluffRegular.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/FluffRegular.woff2') format('woff2'),
			 url('../fonts/FluffRegular.woff') format('woff'),
			 url('../fonts/FluffRegular.svg#FluffRegular') format('svg');
}
.fluff {
    font-family: 'Fluff';
}
.cgothic {
    font-family: 'CenturyGothic';
}

/* RESET CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
  display: inline-block;
}
html[xmlns] .clearfix {
  display: block;
}
* html .clearfix {
  height: 1%;
}
ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}
header, nav, section, article, aside, footer, hgroup {
  display: block;
}
* {
  box-sizing: border-box;
}

:root {
  --blanco: #fff;
  --amarillo: #FCD116;
  --azul: #0038A8;
  --rojo: #CE1126;
  --naranja: #FF6600;
  --negro: #000;
  --cyan: #00FFFF;
  --violeta: #aa55ff;
  --verde: #006600;
  --rosado: #ff6cb6;
  --amarillo-pastel-claro: #FFFFB6;
  --azul-pastel-claro: #B6DBFF;
  --rojo-pastel-claro: #FFB6B6;
  --naranja-pastel-claro: #FFDBB6;
  --negrogris: #333333;
  --cyan-pastel-claro: #E1FFFF;
  --violeta-pastel-claro: #DBB6FF;
  --verde-pastel-claro: #B6FFB6;
  --rosa-pastel-claro: #FFB6DB;
  --gris: #808080;
  --gris-claro: #A9A9A9;

  --brand-primary: #3c2a77; / Púrpura oscuro del botón 'Inscribirme' /
  --brand-secondary: #f0c330; / Amarillo del botón 'Participar' y acentos /
  --light-yellow-bg: #fffbf0; / Color de fondo general muy claro */
  --text-dark: #333;
  --text-muted: #6c757d;

}

.blanco-c {
  color: var(--blanco);
}
.blanco-b {
  background-color: var(--blanco);
}
.amarillo-c {
  color: var(--amarillo);
}
.amarillo-b {
  background-color: var(--amarillo);
}
.azul-c {
  color: var(--azul);
}
.azul-b {
  background-color: var(--azul);
}
.rojo-c {
  color: var(--rojo);
}
.rojo-b {
  background-color: var(--rojo);
}
.naranja-c {
  color: var(--naranja);
}
.naranja-b {
  background-color: var(--naranja);
}
.negro-c {
  color: var(--negro);
}
.negro-b {
  background-color: var(--negro);
}
.cyan-c {
  color: var(--cyan);
}
.cyan-b {
  background-color: var(--cyan);
}
.violeta-c {
  color: var(--violeta);
}
.violeta-b {
  background-color: var(--violeta);
}
.verde-c {
  color: var(--verde);
}
.verde-b {
  background-color: var(--verde);
}
.rosado-c {
  color: var(--rosado);
}
.rosado-b {
  background-color: var(--rosado);
}
.amarillo-pastel-claro-c {
  color: var(--amarillo-pastel-claro);
}
.amarillo-pastel-claro-b {
  background-color: var(--amarillo-pastel-claro);
}
.azul-pastel-claro-c {
  color: var(--azul-pastel-claro);
}
.azul-pastel-claro-b {
  background-color: var(--azul-pastel-claro);
}
.rojo-pastel-claro-c {
  color: var(--rojo-pastel-claro);
}
.rojo-pastel-claro-b {
  background-color: var(--rojo-pastel-claro);
}
.naranja-pastel-claro-c {
  color: var(--naranja-pastel-claro);
}
.naranja-pastel-claro-b {
  background-color: var(--naranja-pastel-claro);
}
.negrogris-c {
  color: var(--negrogris);
}
.negrogris-b {
  background-color: var(--negrogris);
}
.cyan-pastel-claro-c {
  color: var(--cyan-pastel-claro);
}
.cyan-pastel-claro-b {
  background-color: var(--cyan-pastel-claro);
}
.violeta-pastel-claro-c {
  color: var(--violeta-pastel-claro);
}
.violeta-pastel-claro-b {
  background-color: var(--violeta-pastel-claro);
}
.verde-pastel-claro-c {
  color: var(--verde-pastel-claro);
}
.verde-pastel-claro-b {
  background-color: var(--verde-pastel-claro);
}
.rosa-pastel-claro-c {
  color: var(--rosa-pastel-claro);
}
.rosa-pastel-claro-b {
  background-color: var(--rosa-pastel-claro);
}
.gris-c {
  color: var(--gris);
}
.gris-b {
  background-color: var(--gris);
}
.gris-claro-c {
  color: var(--gris-claro);
}
.gris-claro-b {
  background-color: var(--gris-claro);
}

.syne-font {
  font-family: "Syne", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}


/* ESTILOS GLOBALES */
html, body {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	background-color: var(--light-yellow-bg);
	font-size: calc(1em + 0.3vw);
	line-height: calc(1em + 0.3vw);
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
  width: 100vw;
  height: 100vh;
  margin: 0;
  color: var(--text-dark);
}

/* Clases de utilidad para fondos */
.bg-light-yellow {
background-color: var(--light-yellow-bg);
}

.btn-participar {
background-color: var(--brand-secondary);
border-color: var(--brand-secondary);
color: var(--text-dark);
font-weight: bold;
border-radius: 25px;
padding: 0.5rem 1.5rem;
}

/* ============================
SECCIÓN HÉROE
============================ */
.hero-section {
padding-top: 1rem;
padding-bottom: 1rem;
}

.hero-section h1 {
color: var(--brand-primary);
}

.btn-inscribirme {
background-color: var(--brand-primary);
border-color: var(--brand-primary);
padding: 0.75rem 1.5rem;
font-weight: 500;
}

.btn-inscribirme:hover {
background-color: #2e1f5a; /* Un poco más oscuro */
border-color: #2e1f5a;
}

.hero-section .btn-outline-secondary {
padding: 0.75rem 1.5rem;
font-weight: 500;
border-width: 2px;
}
a {
  text-decoration: none !important;
  color: #000099;
}
a:hover {
	color: #ecb100;
}

a.ingreso {
  text-decoration: none !important;
  color: #000000;
}
a.ingreso:hover {
  color: #67686d !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

img {
	width: 100%;
	overflow: hidden;
}

#miImagen {
	transition: transform 0.5s ease-in-out;
	max-height: 60px;
}

table, th, td, tr, tbody, thead {
	background: transparent !important;
}

.custom-tooltip {
  --bs-tooltip-bg: #000;
  --bs-tooltip-color: #ffff00;
  font-size: 18px; /* Tamaño de fuente del tooltip */
}
.btnplay {
	position: absolute;
	color: #fff;
	font-size: calc(2em + 0.4vw);
	margin-left: calc(0.8em + 0.4vw);
	margin-top:  calc(0.5em + 0.8vh)
}
.btnpause {
	position: absolute;
	color: #bfbfbf;
	font-size: calc(2em + 0.4vw);
	margin-left: calc(0.8em + 0.4vw);
	margin-top:  calc(0.5em + 0.8vh)
}

::selection {
  background: #f5a425;
  color: #fff;
}
::-moz-selection {
  background: #f5a425;
  color: #fff;
}

@media (max-width: 991px) {
	.sub-header .left-content p {
		display: none;
	}
	.left-content p {
		display: none;
	}
	html, body {
		overflow-x: hidden;
	}
	.mobile-top-fix {
		margin-top: 30px;
		margin-bottom: 0px;
	}
	.mobile-bottom-fix {
		margin-bottom: 30px;
	}
	.mobile-bottom-fix-big {
		margin-bottom: 60px;
	}
}

.main-button-red a {
  font-size: 13px;
  color: #fff;
  background-color: #a12c2f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-red a:hover {
  opacity: 0.9;
}

.main-button-yellow a {
  color: #fff;
  background-color: #f5a425;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-yellow a:hover {
  opacity: 0.9;
}

.section-heading h2 {
	line-height: calc(1em + 0.3vw);
	margin-top: 0px;
	margin-bottom: 50px;
	padding-bottom: 20px;
	font-family: 'Fluff';
	border-bottom: 1px solid rgba(250,250,250,0.15);
	font-size: calc(1em + 0.5vw);
	font-weight: 700;
	text-shadow: 5.5px 5px 1px #ffcd00;
	color: transparent;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #000;
}

.section-heading2 h2 {
	line-height: calc(1em + 0.3vw);
	margin-top: 0px;
	margin-bottom: 50px;
	padding-bottom: 20px;
	font-family: 'Fluff';
	border-bottom: 1px solid rgba(250,250,250,0.15);
	font-size: calc(1em + 0.5vw);
	font-weight: 700;
	text-shadow: 5.5px 5px 1px #ffcd00;
	color: transparent;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #fff;
}
/* ENCABEZADO */
.sub-header {
  background-color: #ffcc00;
  position: absolute;
  width: 100%;
  z-index: 1111;
}

.sub-header .left-content p {
  color: #000;
  padding: 8px 0px;
  font-size: 13px;
}
.left-content p {
  color: #000;
  padding: 8px 0px;
  font-size: 13px;
}
.right-icons {
  padding: 8px 0px;
  text-align: center;
  display: flex;
  margin-left: 25%;
}
.right-icons ul li {
  display: inline-block;
  margin-left: 15px;
  text-align: center;
}
.right-icons ul li a {
  color: #000;
  font-size: 14px;
  transition: all .3s;
  text-align: center;
}
.right-icons ul li a:hover {
  color: #f5a425;
}

.sub-header .right-icons {
  text-align: center;
}

.sub-header .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.sub-header .right-icons ul li a {
  color: #000;
  font-size: 14px;
  transition: all .3s;
}

.sub-header .right-icons ul li a:hover {
  color: #f5a425;
}

.sub-header .left-content p em {
   font-style: normal;
   color: #f5a425;
}

.background-header {
  background-color: #000!important;
  height: 40px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #fb5849!important;
}

.background-header .nav li a.active {
  color: #fb5849!important;
}

/* header area */
.header-area {
  position: absolute;
  background-color: rgba(0, 0, 0,1);
  /* top: 40px; */
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #f5a425!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #f5a425!important;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #f5a425!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 60px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #f5a425;
}

@media (max-width: 1200px) {
	#miImagen {
		transition: transform 0.5s ease-in-out;
		max-height: 60px;
	}
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
	.section-heading h2 {
	  line-height: calc(1em + 0.3vw);
	  margin-top: 0px;
	  margin-bottom: 50px;
	  padding-bottom: 20px;
	  border-bottom: 1px solid rgba(0, 0, 0,0.15);
	  font-size: 22px;
	  font-weight: 700;
	  color: #000;
	}
	#miImagen {
		transition: transform 0.5s ease-in-out;
		max-height: 40px;
	}
	.header-area .main-nav .logo {
		color: #1e1e1e;
	}
	.header-area.header-sticky .nav li a:hover,
	.header-area.header-sticky .nav li a.active {
		color: #f5a425!important;
		opacity: 1;
	}
	.header-area.header-sticky .nav li.search-icon a {
		width: 80%;
	}
	.header-area {
		background-color: #f7f7f7;
		padding: 0px 15px;
		height: 80px;
		box-shadow: none;
		text-align: center;
	}
	.header-area .container {
		padding: 0px;
	}
	.header-area .logo {
		margin-left: 30px;
	}
	.header-area .menu-trigger {
		display: block !important;
	}
	.header-area .main-nav {
		overflow: hidden;
	}
	.header-area .main-nav .nav {
		float: none;
		width: 100%;
		display: none;
		-webkit-transition: all 0s ease 0s;
		-moz-transition: all 0s ease 0s;
		-o-transition: all 0s ease 0s;
		transition: all 0s ease 0s;
		margin-left: 0px;
	}
	.header-area .main-nav .nav li:first-child {
		border-top: 1px solid #eee;
	}
	.header-area.header-sticky .nav {
		margin-top: 100px !important;
	}
	.header-area .main-nav .nav li {
		width: 100%;
		background: #fff;
		border-bottom: 1px solid #eee;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.header-area .main-nav .nav li a {
		height: 50px !important;
		line-height: 50px !important;
		padding: 0px !important;
		border: none !important;
		background: #f7f7f7 !important;
		color: #191a20 !important;
	}
	.header-area .main-nav .nav li a:hover {
		background: #eee !important;
		color: #f5a425!important;
	}
	.header-area .main-nav .nav li.has-sub ul.sub-menu {
		position: relative;
		visibility: inherit;
		opacity: 1;
		z-index: 1;
		transform: translateY(0%);
		top: 0px;
		width: 100%;
		box-shadow: none;
		height: 0px;
		transition: all 0s;
	}
	.header-area .main-nav .nav li.submenu ul li a {
		font-size: 12px;
		font-weight: 400;
	}
	.header-area .main-nav .nav li.submenu ul li a:hover:before {
		width: 0px;
	}
	.header-area .main-nav .nav li.has-sub ul.sub-menu {
		height: auto;
	}
	.header-area .main-nav .nav li.has-sub:after {
		color: #3B566E;
		right: 30px;
		font-size: 14px;
		top: 15px;
	}
	.header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
		height: 0px;
	}

	.custom-tooltip {
	  --bs-tooltip-bg: #000;
	  --bs-tooltip-color: #ffff00;
	  font-size: 14px;
	}

}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* BANNER */
.main-video {
  position: relative;
  width: 100%;
  height: 90vh;
  margin-bottom: 0;
}

	.main-video .caption {
		position: relative;
		top: 60%;
		left: 40%;
		transform: translateY(-60%);
	}
	.main-video .caption h6 {
		margin-top: 0px;
		font-size: 15px;
		text-transform: uppercase;
		font-weight: 600;
		color: #fff;
		letter-spacing: 1px;
	}
	.main-video .caption h2 {
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 36px;
		text-transform: uppercase;
		font-weight: 800;
		color: #fff;
		letter-spacing: 1px;
	}
	.main-video .caption h2 em {
		font-style: normal;
		color: #f5a425;
		font-weight: 900;
	}
	.main-video .caption p {
		color: #fff !important;
		background: transparent;
		font-size: calc(0.8em + 0.2vw);
		line-height: 1.2em;
	}
	.main-video .caption .main-button-red {
	  margin-top: 30px;
	}

	#bg-video {
	  width: 100%;
	  height: 100%;
	  object-fit: fill;
	  z-index: -1;
	}

	#bg-video::-webkit-media-controls {
		display: none !important;
	}

.video-overlay {
    display: flex;
    align-items: flex-end; /* Alinear al final verticalmente */
    justify-content: flex-end; /* Alinear al final horizontalmente */
    position: absolute;
    background-color: rgba(31,39,43,0.75);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.play-circle {
    margin-right: 10%; /* Margen derecho del 10% */
    margin-bottom: 30%; /* Margen inferior del 10% */
}


/*
	.video-overlay {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		background-color: rgba(31,39,43,0.75);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.play-circle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(6em + 0.4vw);
		height: calc(6em + 0.4vw);
		border-radius: 50%;
		background-color: transparent;
		border: 6px solid #fff;
		color: #fff;
		cursor: pointer;
	}
	.play-circle span {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(3em + 0.2vw);
		position: absolute;
		color: #fff;
	}

	.play-circle i {
		font-size: calc(3em + 0.2vw);
		color: #fff;
	}
*/
@media screen and (max-width: 767px) {
	.play-circle {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60px;
		width: calc(4em + 0.4vw);
		height: calc(4em + 0.4vw);
		border-radius: 50%;
		background-color: transparent;
		border: 4px solid #fff; /* Color del borde */
		color: #fff;
		cursor: pointer; /* Cambiar cursor a mano */
	}
	.play-circle span {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(1.3em + 0.5vw);
		position: absolute;
		color: #fff;
	}
	/* Puedes agregar estos estilos para dar un aspecto específico al ícono */
	.play-circle i {
		font-size: calc(1.3em + 0.5vw); /* Ajusta el tamaño del ícono según tus preferencias */
		color: #fff; /* Cambia el color según tus preferencias */
	}
	#miImagen {
		transition: transform 0.5s ease-in-out;
		max-height: 40px;
		margin-top: -20px;
	}
	.main-video {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 60vh;
		margin-bottom: 0;
	}
	#bg-video {
		width: 100%;
		height: 100%;
		object-fit: fill;
		z-index: -1;
	}
	.main-video .caption {
		margin-top: 30%;
		left: 0%;
		transform: translateY(-30%);
	}
	.main-video .caption h6 {
		font-weight: 500;
	}
	.main-video .caption h2 {
		font-size: 36px;
	}
}

/* MENSAJE */
section.mensaje {
  position: relative;
  width: 100%;
  display: block;
  padding: 40px 0px;
  background: #fff;
  margin-bottom: 0;
}

/* services */
section.services {
    background: #fff;
    width: 100%;
    padding: 40px 25px 5px 25px;
	background: #fff;
}
	.services .item {
	  border-radius: 20px;
	  text-align: center;
	  padding: 3%;
	  border: 4px ridge #000;
	  background: #fff;
	  color: #000;
	  min-height: 45vh;
	}
	.services .item .icon {
	  width: 20%;
	  margin: 0 auto;
	}
	.services h1 {
		font-weight: 900;
		font-family: 'Fluff';
		font-size: calc(1em + 1vw);
		text-align: center;
		padding-bottom: 30px;
		margin-top: calc(1.3em + 1vh);
	}
	.contentd {
		display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center;
		width: 90%;
		margin-left: 5%;
	}
	.services .item h4 {
	  margin-top: 8px;
	  margin-bottom: 8px;
	  padding: 0;
	  font-size: calc(1.2em + 0.4vh);
	  font-weight: 700;
	  width: 90%:
	  margin-left: 5%;
	  display: block;
	  align-items: center;
	}
	.services .item p {
	  color: #000;
	  font-size: calc(1em + 0.1vw);
	  border-top: 2px solid #000000;
	  padding-top: 20px;
	  height: 280px;
	  width: 90vw:
	  bottom: 2vh;
	  text-align: center;
	  display: block;
	  align-items: center;
	}
	.services .owl-nav {
	  display: inline-block !important;
	  text-align: center;
	  position: absolute;
	  width: 100%;
	  top: 50%;
	  transform: translateY(-25px);
	}
	.services .owl-nav .owl-prev{
	  margin-right: 10px;
	  outline: none;
	  position: absolute;
	  left: -80px;
	}
	.services .owl-nav .owl-prev span,
	.services .owl-nav .owl-next span {
	  opacity: 0;
	}
	.services .owl-nav .owl-prev:before {
	  display: inline-block;
	  font-family: 'FontAwesome';
	  color: #1e1e1e;
	  font-size: 25px;
	  font-weight: 700;
	  content: '\f104';
	  background-color: #fff;
	  width: 50px;
	  height: 50px;
	  border-radius: 50%;
	  line-height: 50px;
	}
	.services .owl-nav .owl-prev {
	  opacity: 1;
	  transition: all .5s;
	}
	.services .owl-nav .owl-prev:hover {
	  opacity: 0.9;
	}
	.services .owl-nav .owl-next {
	  opacity: 1;
	  transition: all .5s;
	}
	.services .owl-nav .owl-next:hover {
	  opacity: 0.9;
	}
	.services .owl-nav .owl-next{
	  margin-left: 10px;
	  outline: none;
	  position: absolute;
	  right: -85px;
	}
	.services .owl-nav .owl-next:before {
	  display: inline-block;
	  font-family: 'FontAwesome';
	  color: #1e1e1e;
	  font-size: 25px;
	  font-weight: 700;
	  content: '\f105';
	  background-color: #fff;
	  width: 50px;
	  height: 50px;
	  border-radius: 50%;
	  line-height: 50px;
	}
	.imagen-superior-der-act {
	position: relative;
		top: 0%;
		left: 40%;
		height: 20%;
		width: 60%;
		transform: translate(0, -50%);
		z-index: 99;
		padding: 0;
		margin: 0;
	}

.imagen-superior-der {
    position: absolute;
    top: 0;
    right: 0;
    height: 14%;
    width: 50%;
    transform: translate(0, -50%);
    z-index: 99;
}

	.imagen-superior-derb {
		position: absolute;
		top: 0;
		right: 0;
		height: 18%;
		width: 60%;
		transform: translate(0, -60%);
		z-index: 99;
		margin-top: 20px;
	}
	.imagen-inferior-izq {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 14%;
		width: 90%;
		transform: translate(-30%, 50%);
		z-index: 99;
	}

.fondo-amarillo {
	background: linear-gradient( to bottom, #fff 20%, #fecc04 40%, #fecc04 70%, #fff 80%, #fff 90%);
}
/* upcoming meetings */
section.upcoming-meetings {
  display: block;
  background: #fff;
  background-image: url('../multimedia/imagenes/fondos/fondo_actividades.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  padding-top: 70px;
  padding-bottom: 70px;
}

/* Estilo para cada fila dentro de la sección */
section.upcoming-meetings .row {
  margin-bottom: 0;
}

section.upcoming-meetings .section-heading h2 {
	font-weight: 900;
	font-family: 'Fluff';
	font-size: calc(1em + 1vw);
	text-align: left;
	margin-top: 50px  ;
	margin-left: 2%;
	color: #fff;
}
section.upcoming-meetings .section-heading {
  text-align: center;
}

section.upcoming-meetings .categories {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
  margin-right: 45px;
}

section.upcoming-meetings .categories h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1f272b;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

section.upcoming-meetings .categories ul li {
  display: inline-block;
  margin-bottom: 15px;
}

section.upcoming-meetings .categories ul li a {
  font-size: 15px;
  color: #1f272b;
  font-weight: 500;
  transition: all .3s;
}

section.upcoming-meetings .categories ul li a:hover {
  color: #a12c2f;
}

section.upcoming-meetings .categories .main-button-red {
  border-top: 1px solid #eee;
  padding-top: 30px;
  margin-top: 15px;
}

section.upcoming-meetings .categories .main-button-red a {
  width: 100%;
  text-align: center;
}

.meeting-item {
  margin-bottom: 30px;
  margin-top: 30px;
}

.meeting-item .thumb {
  position: relative;
}

.meeting-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-item .down-content {
  background-color: #fff;
  padding: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-item .down-content .date {
  float: left;
  text-align: center;
  display: inline-block;
  margin-right: 20px;
}

.meeting-item .down-content .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-item .down-content .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-item .down-content h4 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-item .down-content p {
  margin-left: 50px;
  color: #1f272b;
  font-size: 14px;
}

/*
---------------------------------------------
apply now
---------------------------------------------
*/

/* Igualar altura de los items en la misma fila */
section.apply-now .col-md-6 {
  display: flex;        /* activa flex en la columna */
}
section.apply-now .item {
  position: relative;
  flex: 1;              /* fuerza que cada item se estire */
  width: 100%;
  height: auto;         /* se ajusta al contenido */
  display: flex;        /* opcional: para empujar botón al fondo */
  flex-direction: column;
  background: #000;
  color: #fff;
  border-radius: 12px;
  padding: 40px;
}

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: #fff;
  margin-left: 45px;
}
.accordions .accordion {
  border-bottom: 1px solid #eee;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #1f272b;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  border-bottom: 1px solid #fff;
}
@media screen and (min-width: 768px) {
	.main-video {
		position: relative;
		width: 100%;
		height: 60vh;
		margin-bottom: 0;
	}
	.accordion-head {
		padding: 1rem;
		font-size: 1.2rem;
	}
}
.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}
.accordion-head.is-open {
  color: #f5a425;
  border-bottom: none;
}
.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}
.accordion-body > .content {
  padding: 20px;
  padding-top: 0;
}


/* courses */

section.our-courses {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 140px;
  padding-bottom: 130px;
}

.our-courses .item .down-content {
  background-color: #fff;
}

.our-courses .item .down-content h4 {
  padding: 25px;
  font-size: 18px;
  color: #1f272b;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.our-courses .item .down-content .info {
  padding: 25px;
}

.our-courses .item .down-content .info ul li {
  display: inline-block;
  margin-right: 1px;
}

.our-courses .item .down-content .info ul li i {
  color: #f5a425;
  font-size: 14px;
}

.our-courses .item .down-content .info span {
  color: #a12c2f;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  display: inline-block;
  width: 100%;
}

.our-courses .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-45px);
}

.our-courses .owl-dots {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 40px;
}

.our-courses .owl-dots .owl-dot {
  transition: all .5s;
  width: 7px;
  height: 7px;
  background-color: #fff;
  margin: 0px 5px;
  border-radius: 50%;
  outline: none;
}

.our-courses .owl-dots .active {
  width: 24px;
  height: 8px;
  border-radius: 4px;
}

.our-courses .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.our-courses .owl-nav .owl-prev span,
.our-courses .owl-nav .owl-next span {
  opacity: 0;
}

.our-courses .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.our-courses .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.our-courses .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
our facts
---------------------------------------------
*/

.our-facts {
    position: relative; /* Necesario para posicionar el overlay */
    background-image: url('../img/flash-mob-7-por-colombia-bogota.png'); /* <-- CAMBIA ESTO por la ruta de tu imagen de la gente */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 5rem; /* Añadimos padding para dar espacio */
    padding-bottom: 5rem;
}

/* El overlay oscuro semitransparente */
.our-facts::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65); /* Negro con 65% de opacidad. Puedes ajustar este valor */
    z-index: 1; /* Se asegura que esté sobre el fondo pero debajo del contenido */
}

/* Asegura que el contenido (título, tarjetas, etc.) esté por encima del overlay */
.our-facts .container {
    position: relative;
    z-index: 2;
}

/* Clase de utilidad para la sombra del texto */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}



section.our-facts .section-heading h2 {
	font-weight: 900;
	font-family: 'Fluff';
	font-size: calc(1em + 1vw);
	text-align: center;
	margin-top: calc(1.6em + 1vh);
	margin-left: 2%;
	color: #fff;
}

section.our-facts h2 {
  font-size: 38px;
  color: #fff;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 50px;
}

section.our-facts .card {
    background-color: rgba(250,250,250,0.95);
}

.count-area-content {
  text-align: center;
  background-color: rgba(250,250,250,0.15);
  border-radius: 20px;
  padding: 25px 30px 35px 30px;
  margin: 15px 0px;
}

.percentage .count-digit:after {
  content: '%';
  margin-left: 3px;
}

.count-title {
    font-family: 'Fluff';
	font-size: calc(1em + 1vw);
	line-height: calc(0.8em + 0.3vw);
    font-weight: 200;
    color: #ffcc00;
    letter-spacing: 1.9px;
}
.count-digit {
    font-family: 'Fluff';
    font-size: calc(7.5em + 1vw);
    margin: 75px 0 15px 0;
    color: #fff;
    font-weight: 700;
    height: 80px;
}

.new-students {
  margin-top: 45px;
}

section.our-facts .video {
  text-align: center;
  margin-left: 70px;
  background-image: url(../images/video-item-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
}

section.our-facts .video img {
  padding: 170px 0px;
  max-width: 56px;
}







/* CONTACTENOS */
section.contact-us {
	/*
	background-image: url(../images/meetings-bg.jpg);
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	*/
  background: #fff;
  padding: 120px 0 30px 30px;
}
.contact-us h1 {
	font-weight: 900;
	font-family: 'Fluff';
	font-size: calc(1em + 1vw);
	text-align: center;
	padding-bottom: 30px;
}
section.contact-us #contact {
  background-color: #fff;
  border-radius: 20px;
}

section.piepagina {
  background-color: #ff66ff;
  color: #000;
  padding: 0;
  font-size: calc(0.6em + 0.5vw);
  line-height: calc(1.1em + 0.8vw);
  z-index: 99;
}
.piepagina p {
  text-transform: uppercase;
  color: #000;
}

.piepagina p a {
  color: #f5a425;
}


/*
---------------------------------------------
heading page
---------------------------------------------
*/

section.heading-page {
  background-image: url(../images/heading-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
  text-align: center;
}

section.heading-page h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

section.heading-page h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}


/*
---------------------------------------------
upcoming meetings page
---------------------------------------------
*/

section.meetings-page {
  background: #fff;
  padding: 0px;
}


section.meetings-page .filters {
  text-align: center;
  margin-bottom: 60px;
}

section.meetings-page .filters li {
  font-size: 13px;
  color: #a12c2f;
  background-color: #fff;
  padding: 11px 30px;
  display: inline-block;
  border-radius: 22px 0 22px 0;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  margin: 0px 3px;
}

section.meetings-page .filters ul li.active,
section.meetings-page .filters ul li:hover {
  background-color: #a12c2f;
  color: #fff;
}

section.meetings-page .pagination {
  text-align: center;
  width: 100%;
  margin-top: 30px;
  display: inline-block;
}

section.meetings-page .pagination ul li {
  display: inline-block;
}

section.meetings-page .pagination ul li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  color: #1f272b;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  font-size: 15px;
  transition: all .3s;
}

section.meetings-page .main-button-red {
  text-align: center;
}

section.meetings-page .main-button-red a {
  padding: 12px 60px;
  text-align: center;
  margin-top: 30px;
}

section.meetings-page .pagination ul li.active a,
section.meetings-page .pagination ul li a:hover {
  background-color: #a12c2f;
  color: #fff;
}

.meeting-single-item .thumb {
  position: relative;
}

.meeting-single-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-single-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-single-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-single-item .down-content {
  background-color: #fff;
  padding: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-single-item .thumb .date {
  position: absolute;
  background-color: rgba(250,250,250,0.9);
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 15px 0px;
  border-radius: 10px;
  right: 20px;
  top: 20px;
}

.meeting-single-item .thumb .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-single-item .thumb .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-single-item .down-content h1 {
	font-family: 'Fluff';
	font-size: calc(1.2em + 1vw);
	line-height: calc(1em + 0.3vw);
	color: #1f272b;
	font-weight: 600;
	margin-bottom: 15px;
}
.meeting-single-item .down-content h1.century {
	font-family: 'CenturyGothic';
	font-size: calc(1.2em + 1vw);
	line-height: calc(1em + 0.3vw);
	color: #1f272b;
	font-weight: 400;
	margin-bottom: 15px;
}

.meeting-single-item .down-content h4 {
  font-size: 22px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content h5 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content p {
  color: #1f272b;
}

.meeting-single-item .down-content p.description {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.meeting-single-item .down-content .share {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  text-align: right;
}

.meeting-single-item .down-content .share h5 {
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

.meeting-single-item .down-content .share ul li {
  display: inline;
}

.meeting-single-item .down-content .share ul li a {
  font-size: 14px;
  color: #1f272b;
  transition: all .3s;
}

.meeting-single-item .down-content .share ul li a:hover {
  color: #f5a425;
}

/* Meeting item column */
.templatemo-item-col {
	width: 31%;
}

/* responsive */

@media (min-width: 1301px) {
	.main-video {
		position: relative;
		width: 100%;
		height: 80vh;
		margin-bottom: 0;
	}
}
@media (max-width: 1200.99px) and (max-width: 1300.99px) {
	.main-video {
		position: relative;
		width: 100%;
		height: 50vh;
		margin-bottom: 0;
	}
	.services .owl-nav .owl-next{
		right: -30px;
	}
	.services .owl-nav .owl-prev{
		left: -25px;
	}
	.our-courses .owl-nav .owl-next{
		right: -30px;
	}
	.our-courses .owl-nav .owl-prev{
		left: -25px;
	}
}
@media (max-width: 1086px) and (max-width: 1200.99px) {
  .services .owl-nav .owl-next{
    right: -70px;
  }
  .services .owl-nav .owl-prev{
    left: -65px;
  }
  .our-courses .owl-nav .owl-next{
    right: -70px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -65px;
  }
}
@media (max-width: 1006px) and (max-width: 1085.99px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}
@media (min-width: 993px) and (max-width: 1005.99px) {
  .services .owl-nav .owl-next{
    display: none;
  }
  .services .owl-nav .owl-prev{
    display: none;
  }
  .our-courses .owl-nav .owl-next{
    display: none;
  }
  .our-courses .owl-nav .owl-prev{
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 992.99px) {
	.services .item h4 {
	  margin-top: 25px;
	  margin-bottom: 15px;
	  font-size: calc(0.5em + 0.4vw);
	  font-weight: 700;
	}
	.services .item p {
	  color: #000;
	  font-size: calc(0.5em + 0.2vw);
	  border-top: 2px solid #000000;
	  padding-top: 20px;
	}
	.imagen-superior-der {
		position: absolute;
		top: 0;
		right: 0;
		height: 7%;
		width: 90%;
		transform: translate(30%, -50%);
		z-index: 99;
	}
	.imagen-superior-derb {
		position: absolute;
		top: 0;
		right: 0;
		height: 9%;
		width: 80%;
		transform: translate(30%, -80%);
		z-index: 99;
		margin-top: 20px;
	}
	.imagen-inferior-izq {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 7%;
		width: 90%;
		transform: translate(-30%, 50%);
		z-index: 99;
	}
	.templatemo-item-col {
		width: 45%;
	}
	.services {
		margin-top: 60px;
	}
	section.upcoming-meetings {
		padding-top: 400px;
	}
	section.upcoming-meetings .categories {
		margin-right: 0px;
		margin-bottom: 30px;
	}
	.accordions {
		margin-left: 0px;
	}
	.new-students {
		margin-top: 15px;
	}
	section.our-facts .video {
		margin-left: 0px;
		margin-top: 15px;
	}
	section.contact-us #contact {
		margin-bottom: 30px;
	}
}

@media (max-width: 767.99px) {
	.section-heading h2 {
		margin-top: 0px;
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid rgba(0, 0, 0,0.15);
		font-weight: 900;
		font-family: 'Fluff';
		font-size: calc(1em + 1vw);
		line-height: calc(1em + 0.3vw);
		color: #fff;
	}
	section.upcoming-meetings .section-heading h2 {
		font-weight: 900;
		font-family: 'Fluff';
		font-size: calc(1em + 1vw);
		text-align: left;
		margin-top: calc(1.3em + 1vh);
		margin-left: 2%;
		color: #000;
	}
	.services .item {
	  border-radius: 20px;
	  text-align: center;
	  padding: 3%;
	  border: 4px ridge #000;
	  background: #fff;
	  color: #000;
	  min-height: 47vh;
	}
	.imagen-superior-der {
		position: absolute;
		top: 0;
		right: 0;
		height: 7%;
		width: 90%;
		transform: translate(30%, -50%);
		z-index: 99;
	}
	.imagen-superior-derb {
		position: absolute;
		top: 0;
		right: 0;
		height: 9%;
		width: 80%;
		transform: translate(30%, -80%);
		z-index: 99;
		margin-top: 20px;
	}
	.imagen-inferior-izq {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 7%;
		width: 90%;
		transform: translate(-30%, 50%);
		z-index: 99;
	}
	.templatemo-item-col {
		width: 100%;
	}
	.sub-header .left-content p {
		display: none;
	}
	.sub-header .right-icons {
		text-align: center;
	}
	.main-nav .nav .sub-menu {
		display: none;
	}
	.header-area .main-nav .nav li ul.sub-menu li a {
		color: #1f272b;
	}
}
@media (max-width: 767.99px) and (orientation: landscape) {
	.main-video {
		position: relative;
		width: 100%;
		height: 100vh;
		margin-bottom: 0;
	}
}
@media (max-width: 992.99px) and (orientation: landscape) {
	.main-video {
		position: relative;
		width: 100%;
		height: 100vh;
		margin-bottom: 0;
	}
}

#dimension-display {
	position: fixed;
	bottom: 10px;
	right: 10px;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-family: Arial, sans-serif;
	z-index: 999;
	font-size: 10px;
}
#floatingDiv {
	position: fixed;
	bottom: 50px;
	right: 10px;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-family: Arial, sans-serif;
	z-index: 999;
	font-size: 10px;
}
#divFlotante {
	position: fixed;
	bottom: 90px;
	right: 10px;
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid #ccc;
	border-radius: 5px;
	font-family: Arial, sans-serif;
	z-index: 999;
	font-size: 10px;
}

/* Estilos personalizados */
.custom-btn {
	position: relative;
	overflow: hidden;
	display: inline-block;
	border: none;
	padding: 0;
	cursor: pointer;
	max-width: 15%;
	background: transparent;
	margin-top: 20px;
}

.custom-btn img {
	transition: transform 0.3s ease-in-out;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.custom-btn:hover img {
	content: url('../multimedia/imagenes/botonera/bt_registrate_aqui_hover.png');
}

.custom-btn:hover .overlay {
	opacity: 1;
}
.btn-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	width: 100%;
}

.card {
  width: 100%;
  float: left;
  margin: 2%;
  background: transparent;
  border: 0;
}
.card .menu-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.card .menu-content::before, .card .menu-content::after {
  content: "";
  display: table;
}
.card .menu-content::after {
  clear: both;
}
.card .menu-content li {
  display: inline-block;
}
.card .menu-content a {
  color: #fff;
}
.card .menu-content span {
  position: absolute;
  left: 50%;
  top: 0;
  font-size: 10px;
  font-weight: 700;
  font-family: "Open Sans";
  transform: translate(-50%, 0);
}
.card .wrapper {
  background: transparent;;
  background-size: cover;
  position: relative;
  min-height: 400px;
  overflow: hidden;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card .wrapper.flashmob {
	background: url('../multimedia/imagenes/fotos/foto1_flashmob.png') center/100% no-repeat;
}
.card .wrapper.webreallity {
	background: url('../multimedia/imagenes/fotos/foto2_webreallity.png') center/100% no-repeat;
}
.card .wrapper.colombia {
	background: url('../multimedia/imagenes/fotos/foto3_colombia.png') center/100% no-repeat;
}
.card .wrapper.planeta {
	background: url('../multimedia/imagenes/fotos/foto4_planeta.png') center/100% no-repeat;
}
.card .wrapper.sociales {
	background: url('../multimedia/imagenes/fotos/foto5_sociales.png') center/100% no-repeat;
}
.card .wrapper.guinnes {
	background: url('../multimedia/imagenes/fotos/foto6_guinnes.png') center/100% no-repeat;
}
.card .wrapper.negocios {
	background: url('../multimedia/imagenes/fotos/foto7_negocios.png') center/100% no-repeat;
}
.card .wrapper:hover .data {
  transform: translateY(10px);
}
.card .data {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(calc(10px + 1em));
  transition: transform 0.3s;
}
.card .data .content {
	margin-top: 30%;
	padding: 0 0.6em 0.6em 0.6em;
	position: relative;
	z-index: 1;
    background: transparent;
	color: #fff;
	background-size: 100% 100%;
	height: 350px;
}
.card .author {
  font-size: calc(0.2em + 0.4vw);
}
.card .title h1 {
  margin: 12px 2px 2px 2px;
  padding: 12px 5px 5px 5px;
}
.card .text {
  height: 70px;
  margin: 10px 0 0 0;
  color: #fff;
  text-overflow: ellipsis;
  border-top: 1px solid #fff;
}
/*
.card input[type=checkbox] {
  display: none;
}
*/
.card input[type=checkbox]:checked + .menu-content {
  transform: translateY(-60px);
}
/* Estilos iniciales para tamaños de pantalla grandes (lg, xl, xxl) */
.card .text span.uno {
  display: block;
  width: 100%;
  padding: 10px 0 8px 0;
  font-weight: 700;
  margin: 12px 0 0 0;
  color: #fff;
  text-align: right;
  font-size: calc(0.4em + 0.2vw);
  line-height: calc(0.35em + 0.2vw);
}

.card .text span.dos {
  display: block;
  width: 100%;
  padding: 10px 0 8px 0;
  font-weight: 500;
  margin: 10px 0 0 0;
  color: #fff;
  font-size: calc(0.4em + 0.5vw);
  line-height: calc(0.35em + 0.5vw);
}

.example-2 .cero {
  display: block;
  width: 100%;
  padding: 15px 0 2px 0;
  font-weight: 700;
  margin: 12px 0 0 0;
  color: #fff;
  text-align: center;
  font-size: calc(0.8em + 0.4vw);
  text-decoration: none; /* Quita la subrayado del enlace */
}

.example-2 .wrapper {
  border-radius: 30px;
  border: 7px solid #ffcd00;
}
.example-2 .wrapper:hover .menu-content span {
  transform: translate(-20%, -3px);
  opacity: 1;
}
.example-2 .header {
  color: #fff;
  padding: 0.5em;
}
.example-2 .header::before, .example-2 .header::after {
  content: "";
  display: table;
}
.example-2 .header::after {
  clear: both;
}
.example-2 .header .date {
  float: left;
  margin-top: -10px;
  font-size: calc(0.6em + 0.4vw);
}
.example-2 .menu-content {
  float: right;
  font-size: calc(0.2em + 0.4vw);
}
.example-2 .menu-content li {
  margin: 0 5px;
  position: relative;
}
.example-2 .menu-content span {
  transition: all 0.3s;
  opacity: 0;
}

.example-2 .data {
  color: #fff;
  transform: translateY(calc(120px + 3em));
}

.example-2 .title a {
  display: block;
  color: #fff;
  font-weight: 800;
  margin-top: 0;
  padding-top: 50px;
  text-align: center !important;
  width: 100%;
  font-size: calc(0.4em + 0.5vw);
}

.example-2 .button {
  margin-top: 10px;
  display: block;
  width: auto;
  text-align: center;
  color: #ffcd00;
  line-height: 1;
  position: relative;
  font-weight: 700;
  top: 50%;
  font-size: calc(0.4em + 0.5vw);
}

.example-2 .button::after {
  content: "→";
  opacity: 0;
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 0.3s;
}

.example-2 .button:hover::after {
  transform: translate(5px, -50%);
  opacity: 1;
}

@media (min-width: 1400px) {
	.card .text span.uno {
		text-align: right;
		font-size: calc(0.6em + 0.5vw);
		line-height: calc(0.95em + 0.5vw);
	}
	.card .text span.dos {
		font-size: calc(0.9em + 0.5vw);
		line-height: calc(0.95em + 0.5vw);
	}
	.example-2 .cero {
		padding: 15px 0 2px 0;
		font-size: calc(0.8em + 0.4vw);
	}
}
@media (min-width: 1200px) {
	.card .text span.uno {
		text-align: right;
		font-size: calc(0.6em + 0.5vw);
		line-height: calc(0.95em + 0.5vw);
	}
	.card .text span.dos {
		font-size: calc(0.9em + 0.5vw);
		line-height: calc(0.95em + 0.5vw);
	}
	.example-2 .cero {
		padding: 15px 0 2px 0;
		font-size: calc(0.6em + 0.4vw);
	}
}
@media (min-width: 993px) {
	.card .text span.uno {
		text-align: right;
		font-size: calc(0.6em + 0.5vw);
		line-height: calc(-0.5em + 0.5vw);
	}
	.card .text span.dos {
		font-size: calc(0.6em + 0.5vw);
		line-height: calc(0.95em + 0.5vw);
	}
}

@media (min-width: 993px) and (orientation: landscape) {
	.card .text span.uno {
		text-align: right;
		font-size: calc(0.6em + 0.5vw);
		line-height: calc(-0.5em + 0.5vw);
	}
	.card .text span.dos {
		font-size: calc(0.6em + 0.5vw);
		line-height: calc(0.95em + 0.5vw);
	}
}

/* Media queries para pantallas medianas (md) */
@media (max-width: 992.99px) {
	.card .text span.uno {
		text-align: right;
		font-size: calc(1em + 0.3vw);
		line-height: calc(1em + 0.3vw);
	}
	.card .text span.dos {
		font-size: calc(1em + 0.3vw);
		line-height: calc(1em + 0.3vw);
	}
	.card .wrapper {
		min-height: 380px;
	}
	.example-2 .button {
		margin-top: 10px;
		top: 80%;
	}
	.example-2 .button::after {
  content: "→";
  opacity: 0;
  position: absolute;
		top: 80%;
		transform: translate(0, -80%);
	}
	.card .wrapper:hover .data {
		transform: translateY(20px);
	}
	.example-2 .data {
		color: #fff;
		transform: translateY(calc(160px + 3em));
	}
}

/* Media queries para pantallas pequeñas (sm) */
@media (max-width: 768px) {
	.card .text span.uno,
	.card .text span.dos {
		text-align: left;
		font-size: calc(1em + 0.6vw);
		line-height: calc(1em + 0.6vw);
	}
	.card .wrapper {
		min-height: 400px;
	}
	.example-2 .button {
		margin-top: 10px;
		top: 80%;
	}
	.example-2 .button::after {
  content: "→";
  opacity: 0;
  position: absolute;
		top: 80%;
		transform: translate(0, -80%);
	}
	.card .wrapper:hover .data {
		transform: translateY(10px);
	}
	.example-2 .data {
		color: #fff;
		transform: translateY(calc(180px + 3em));
	}
}

/* Estilos para pantallas grandes (md, lg, xl, xxl) */
@media (min-width: 768px) {
	.example-2 .cero {
		font-size: calc(1.3em + 0.4vw);
	}
	.example-2 .button {
		margin-top: 10px;
		top: 40%;
		font-size: calc(0.8em + 0.5vw);
		line-height: calc(-0.5em + 0.5vw);
	}
	.example-2 .button::after {
  content: "→";
  opacity: 0;
  position: absolute;
		top: 80%;
		transform: translate(0, -80%);
	}
	.example-2 .data {
		color: #fff;
		transform: translateY(calc(140px + 3em));
	}
}
/* Estilos para pantallas medianas (sm) */
@media (min-width: 576px) and (max-width: 767px) {
	.example-2 .cero {
		font-size: calc(1.2em + 0.4vw); /* Tamaño de fuente para pantallas medianas */
	}
	.example-2 .button {
		margin-top: 10px;
		top: 40%;
		font-size: calc(1em + 0.5vw);
		line-height: calc(-0.5em + 0.5vw);
	}
	.example-2 .button::after {
  content: "→";
  opacity: 0;
  position: absolute;
		top: 80%;
		transform: translate(0, -80%);
	}
}
/* Estilos para pantallas pequeñas (xs) */
@media (max-width: 575px) {
	.example-2 .cero {
		font-size: calc(1.1em + 0.4vw); /* Tamaño de fuente más pequeño para pantallas pequeñas */
	}
	.example-2 .button {
		margin-top: 10px;
		top: 40%;
		font-size: calc(1em + 0.5vw);
		line-height: calc(-0.5em + 0.5vw);
	}
	.example-2 .button::after {
		content: "→";
		opacity: 0;
		position: absolute;
		top: 40%;
		transform: translate(0, -40%);
	}
}

/* bannners */
.bannflashmob {
	background-color: #ffffff;
	display: block;
	justify-content: center;
	align-items: center;
	width: 100% !important;
	z-index: 999;
}

.bannflashmob h6, .bannflashmob h2 {
  text-align: center;
}


/* COUNTER PARA UNA FECHA */
.to-date {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
}
.to-date #to {
  display: block;
  font-size: 42px;
  background: #fff;
  border-radius: 100px;
  margin: 5px;
  padding: 3px;
  font-weight: 600;
  color: #0a0a0a;
}

.to-date2 {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}
.to-date2 #to {
  display: block;
  font-size: 34px;
  background: #fff;
  border-radius: 100px;
  margin: 5px;
  padding: 3px;
  font-weight: 600;
  color: #0a0a0a;
}

.info1 {
	text-align: center;
	line-height: 1.1;
	font-size: 50%;
	margin-left: 15%;
	width: 70%;
}
.text2 {
	padding-top: 2%;
}
@keyframes wobble {
  from {
    transform: scale(0.9);
    top: 20px;
  }
  to {
    transform: scale(1);
    top: 0px;
  }
}
@media (max-width: 767.99px) {
	.text2 {
		padding-top: 4%;
	}

}


@media (max-width: 767.99px) {
/* bannners */
	.bannflashmob {
		height: 22vh;
		margin-top: 14%;
	}
}
@media (max-width: 767.99px) and (orientation: landscape) {
/* bannners */
	.bannflashmob {
		height: 50vh;
		margin-top: 10%;
	}
}
@media (min-width: 768px) and (max-width: 992.99px) {
/* bannners */
	.bannflashmob {
		height: 23vh;
		margin-top: 12%;
	}
}
@media ((min-width: 768px) and (max-width: 992.99px)) and (orientation: landscape) {
/* bannners */
	.bannflashmob {
		height: 50vh;
		margin-top: 10%;
	}
}
@media (min-width: 993px) and (max-width: 1299.99px) {
	.bannflashmob {
	  height: 24vh;
	  margin-top: 5vh;
	}
}
@media ((min-width: 993px) and (max-width: 1299.99px)) and (orientation: landscape) {
	.bannflashmob {;
	  height: 60vh;
	}
}
@media (min-width: 1300px) {
	.bannflashmob {
	    background-co
	  height: 80vh;
	}
}
@media (min-width: 1300px) and (orientation: landscape) {
	.bannflashmob {
	  height: 42vh;
	  margin-top: 7vh;
	}
}

.custom-control-input {
	font-size: 1.2rem !important;
}

.form-text1 {
    margin-top: .25rem;
    font-size: .675em;
    color: var(--bs-secondary-color);
	line-height: calc(.7em + 0.3vw);
}


/* Misma altura para todos los botones */
.checkbox-btn {
    height: 100%; /* hacer que el label llene la tarjeta */
    min-height: 90px; /* altura mínima consistente */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Evita que el enlace dentro del label active el checkbox */
.no-toggle {
    pointer-events: auto !important;
}

.no-toggle a {
    color: inherit;
    text-decoration: underline;
}

.btn-black{color:#fff;background-color:#000;border-color:#000}
.btn-black:hover{color:#fff;background-color:#454545;border-color:#454545}
.btn-black.focus,.btn-black:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}
.btn-black.disabled,.btn-black:disabled{background-color:#000;border-color:#000}
.btn-black:not([disabled]):not(.disabled).active,.btn-black:not([disabled]):not(.disabled):active,.show>.btn-black.dropdown-toggle{color:#fff;background-color:#454545;border-color:#454545;box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}

/* Estilo para el texto de los menús principales al pasar el mouse */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #fecc04; !important;
}

/* Estilo para el texto de los menús principales al hacer clic */
.navbar-nav .nav-link:active {
  color: #e0b401; !important;
}

/* Estilo para el texto de los menús secundarios al pasar el mouse */
.dropdown-menu a:hover,
.dropdown-menu a:focus {
  color: #e0b401 !important;
}

/* Estilo para el texto de los menús secundarios al hacer clic */
.dropdown-menu a:active {
  color: #e0b401 !important;
}
/* Estilo para el texto de los menús principales al estar activos */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:active {
  color: #e0b401 !important;
}

/* Estilo para el texto de los menús secundarios al estar activos */
.dropdown-menu a.active,
.dropdown-menu a.hover,
.dropdown-menu a.focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a:active {
  color: #e0b401 !important;
  background-color: #000000 !important;
}
.dropdown-menu:active {
  background-color: transparent !important;
}
item:active {
    background-color: #000000;
}
.dropdown-item {
    color: #fecc04;
    background-color: #000000;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  color: #e0b401 !important;
    background-color: #000000;
}
.baw {
	background: #000000;
	color: #ffffff;
}

.bandera-colombiana {
	background: linear-gradient(to right,
		#FFD100 35%, #FFD100 40%,
		#0033A0 45%, #0033A0 75%,
		#CE1126 85%, #CE1126 100%);
	-webkit-background-clip: text;
	color: transparent;

	/* Contorno 3D */
	-webkit-text-stroke: .03px #000 !important;
}

    .container2 {
	  display: block;
      position: relative;
      overflow: hidden;
	  height: 220px;
	  width: 60%;
	  margin-top: 30px;
	  margin-top: 5px;
	}

    .container2 img {
	  margin-top: 10%;
	  left: 50%;
	  height: 200px;
      width: 200px;
      position: absolute;
      animation: spin 8s infinite linear;
	  transform: translate(-50%, -50%);
    }
	.container2 h1 {
		font-family: 'Fluff';
		display: inline-block;
		text-shadow: 5.5px 5px 1px #ffcd00;
		color: transparent;
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: #000;
		border-bottom: 1px solid #000;
		margin-bottom: 20px;
		padding-bottom: 20px;
		position: absolute;
		margin-top: 5%;
		width: 100%;
		height: 200px;
		text-align: center;
		line-height: 1;
    }
	.container3 h1 {
		font-family: 'Fluff';
		display: inline-block;
		text-shadow: 5.5px 5px 1px #ffcd00;
		color: transparent;
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: #fff;
		border-bottom: 1px solid #fff;
		margin-bottom: 20px;
		padding-bottom: 20px;
		position: absolute;
		margin-top: 5%;
		width: 100%;
		height: 200px;
		text-align: center;
		line-height: 1;
    }
    @keyframes spin {
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

@media (max-width: 320.99px) {
	.container2 {
		height: 170px;
		width: 100%;
	}
	.container2 img {
		margin-top: 40%;
		width: 150px;
		height: 150px;
	}
	.container2 h1 {
		margin-top: 14%;
	}
}
@media (min-width: 321px) and (max-width: 479.99px) {
	.container2 {
		height: 180px;
		width: 100%;
	}
	.container2 img {
		margin-top: 35%;
		width: 150px;
		height: 150px;
	}
	.container2 h1 {
		margin-top: 14%;
	}
}
@media (min-width: 480px) and (max-width: 539.99px) {
	.container2 {
		height: 240px;
		width: 100%;
	}
	.container2 img {
		margin-top: 27%;
		width: 150px;
		height: 150px;
	}
	.container2 h1 {
		margin-top: 14%;
	}
}
@media (min-width: 540px) and (max-width: 767.99px) {
	.container2 {
		height: 240px;
		width: 100%;
	}
	.container2 img {
		margin-top: 22%;
		width: 200px;
		height: 200px;
	}
	.container2 h1 {
		margin-top: 14%;
	}
}
@media (min-width: 768px) and (max-width: 992.99px) {
	.container2 {
		height: 200px;
		width: 100%;
	}
	.container2 img {
		margin-top: 15%;
		width: 150px;
		height: 150px;
	}
	.container2 h1 {
		margin-top: 10%;
	}
}
@media (min-width: 993px) and (max-width: 1199.99px) {
	.container2 {
		height: 200px;
		width: 100%;
	}
	.container2 img {
		margin-top: 10%;
		width: 180px;
		height: 180px;
	}
	.container2 h1 {
		margin-top: 7%;
	}
}
@media (min-width: 1200px) and (max-width: 1399.99px) {
	.container2 {
		height: 220px;
		width: 100%;
	}
	.container2 img {
		margin-top: 10%;
		width: 180px;
		height: 180px;
	}
	.container2 h1 {
		margin-top: 7%;
	}
}
.btn-close {
  width: 0.5em;
  height: 0.5em;
  padding: 0.15em 0.15em;
}
.btn-close:hover {
  opacity: 0.75;
}
.btn-close:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25);
  opacity: 1;
}
.btn-close:disabled {
  opacity: 0.25;
}
.btn-close:active {
  filter: invert(1) grayscale(100%) brightness(200%);
}

#textomodal {
	position: absolute;
	width: 90%;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -20%);
	text-align: center;
	color: #000;
}
.tituloh1 {
	font-family: 'Fluff';
	display: inline-block;
	text-shadow: 5.5px 5px 1px #ffcd00;
	color: transparent;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #000;
	border-bottom: 1px solid #000;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.tituloh2 {
	font-family: 'Fluff';
	display: inline-block;
	text-shadow: 5.5px 5px 1px #ffcd00;
	color: transparent;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #fff;
	border-bottom: 1px solid #fff;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.help-block {
	margin-top: 5px;
	font-size: 50%;
	line-height: 1.2;
}
.helpok {
	color: #006600;
	font-size: 90%;
	font-weight: 600;
	line-height: 1.2;
}
.helphelpt {
	color: #ff0000;
	font-size: 90%;
	font-weight: 500;
	line-height: 1.2;
}
.helpmsj {
	color: #000000;
	font-weight: 500;
	font-size: 100%;
	line-height: 1.2;
}
.form-floating>label {
	font-size: 80% !important;
}
.form-floating>label.codt {
	font-size: 60% !important;
    height: 100%;
    padding: 0.2rem 0.82rem;
	color: rgba(var(--bs-body-color-rgb),.65)
}
.contdigit {
	position: absolute;
	font-size: 50% !important;
	line-height: 1.2;
	color: #ff0000;
	margin-top: -3px;
	padding-top: 0;
}

/* ESTILOS PARA EL BADGE */
.badge-container {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}
.badge-container .badge {
  background-color: #626262 !important;
  color: #FFFFFF;
  padding: 8px 15px;
  border-radius: 5px;
}
.badge-container:hover .badge {
  background-color: #000000 !important;
  color: #FCD116 !important;
}
.aminusculas {
	text-transform: lowercase !important;
}

.truncar {
	font-size: calc(0.7em + 0.1vw) !important;
}

.tarjetaciudad {
  width: 100vw;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, serif;
  font-size: 18px;
  box-sizing: border-box;
  /* background: radial-gradient(circle at 0% 50%, #ff9900, #0000cc, #ff0000 ); */
}

/* pinguino navidad */
.penguin {
  width: 25px;
  height: 45px;
  bottom: 5px;
  position: absolute;
  animation: walk 25s linear infinite;
  z-index: 99999;
}

@keyframes walk {
  0%, 100% {
    left: 0;
    transform: translatex(-50%) scalex(-1);
  }
   49% {
    left: 100%;
    transform: translatex(-50%) scalex(-1);
  }
    50% {
     left: 100%;
     transform: translatex(-50%) scalex(1);
  }
  100% {
      left: 0;
      transform: translatex(-50%) scalex(1);      }
}


#captcha-container {
    margin-bottom: 16px;
}

#captcha-operation {
    font-weight: 300;
	background: #8e959f;
	height: 39px;
	padding: 7px;
	color: #000000;
	font-family: 'Fluff';
	border: 0;
	border-radius: 8px;
	font-size: 13px;
}

/* Estilo para el resultado del CAPTCHA */
#captcha-resultado {
    font-weight: bold;
}

.regenerar-captcha:hover {
    border: 0 !important;
}

#respuesta-captcha {
    width: 45px;
	font-size: 12px;
    font-weight: bold;
	text-align: center;
}
/* Estilo para el fondo del input en respuesta correcta */
#respuesta-captcha.correcto {
    background-color: lightgreen;
}
/* Estilo para el fondo del input en respuesta incorrecta */
#respuesta-captcha.incorrecto {
    background-color: lightcoral;
}


#raven {
	position: absolute;
	top: 20px;
	width: 100%;
	height: 100px;
	animation: raven-path 15s linear;
	opacity: 0;
    z-index: 9999999;
	pointer-events: none; /* Evita que el ave interfiera con la interacción del usuario */

}

.stop-color--1 {
	stop-color: #ff9900;
}

.stop-color--2 {
	stop-color: #0033cc;
}

.stop-color--3 {
	stop-color: #ff0000;
}

path {
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 3.7;
}

@keyframes line-animation {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes raven-path {
    0% {
        transform: translate(-30%, 15%);
        opacity: 1;
    }
    25% {
        transform: translate(20%, 45%);
        opacity: 1;
    }
    40% {
        transform: translate(35%, 10%);
        opacity: 1;
    }
    75% {
        transform: translate(45%, 8%);
        opacity: 1;
    }
    100% {
        transform: translate(80%, -40%);
        opacity: 1;
    }
}

.thumbnail {
	cursor: pointer;
}
.thumbnail img {
	width: 50%;
	height: 70px;
	border-radius: 5px;
}
#videoContainer1 {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 70vh;
	background-color: transparent !important; /* Establece el color de fondo del contenedor */
	z-index: 1000;
	border: 1px solid #ccc;
	overflow: hidden; /* Para ocultar los bordes adicionales que puedan aparecer */
}
.video-frame1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.video-frame1 iframe {
	background-color: transparent !important; /* Establece el color de fondo del iframe a transparente */
}
.thumbs {
	margin-top: 0;
	z-index: 99999999;
}
@media (max-width: 320.99px) {
	#videoContainer1 {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 50vh;
		background-color: transparent !important; /* Establece el color de fondo del contenedor */
		z-index: 1000;
		border: 1px solid #ccc;
		overflow: hidden; /* Para ocultar los bordes adicionales que puedan aparecer */
	}
}
@media (min-width: 321px) and (max-width: 479.99px) {
	#videoContainer1 {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 50vh;
		background-color: transparent !important; /* Establece el color de fondo del contenedor */
		z-index: 1000;
		border: 1px solid #ccc;
		overflow: hidden; /* Para ocultar los bordes adicionales que puedan aparecer */
	}
}
@media (min-width: 480px) and (max-width: 539.99px) {

}
@media (min-width: 540px) and (max-width: 767.99px) {

}
@media (min-width: 768px) and (max-width: 992.99px) {

}
@media (max-width: 767.99px) {

}
@media (max-width: 767.99px) and (orientation: landscape) {

}
@media (max-width: 992.99px) and (orientation: landscape) {

}

.form-check-input {
    border: 1px solid black;
}

/* =================================================================
   ESTILOS RESPONSIVOS PARA MODAL DE REGISTRO Y BANNER DE COOKIES
   Nombres de clases con prefijo "mod_" como solicitado
   ================================================================= */

/* ===== MODAL DE REGISTRO RESPONSIVA ===== */
.mod_registration_modal .modal-dialog {
    margin: 1rem;
}

.mod_registration_modal .modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ffcd00 0%, #ffffff 100%);
}

.mod_registration_modal .modal-body {
    padding: 2rem;
    text-align: center;
    position: relative;
}

.mod_registration_modal .mod_close_btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 18px;
    color: #333;
    z-index: 10;
    transition: all 0.3s ease;
}

.mod_registration_modal .mod_close_btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.mod_registration_modal .mod_modal_icon {
    font-size: 3rem;
    color: #0263af;
    margin-bottom: 1rem;
    animation: mod_pulse 2s infinite;
}

.mod_registration_modal .mod_modal_title {
    color: #ff6600;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mod_registration_modal .mod_modal_text {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.mod_registration_modal .mod_register_btn {
    background: linear-gradient(45deg, #bf2922, #0263af);
    border: none;
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mod_registration_modal .mod_register_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
    text-decoration: none;
}

/* Animación de pulso para el ícono */
@keyframes mod_pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}


.maxw75 {
	max-width: 75%;
}


/* Pie de página */
.piepagina {
  background: #fff;
  font-size: calc(0.6em + 0.7vw);
}

.fs-responsive {
  font-size: calc(0.6em + 0.7vw);
}

.icon-link {
  color: black;
  text-decoration: none;
}

.social-links .social-icon {
  color: black;
  font-size: calc(2em + 1vw);
  margin: 0 8px;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-links .social-icon:hover {
  transform: scale(1.2);
  color: #ffcc00;
}

.copyright {
  font-size: calc(0.6em + 1vw);
}


/* CKEDITOR */
/* custom ckeditor focus textarea */
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
	border: 1px solid #DC143C !important;
}

/* editing area */
.ck-editor__editable[role="textbox"] {
	min-height: 200px;
}

/* block images */
.ck-content .image {
	max-width: 80%;
	margin: 20px auto;
}

/* generate (button) */
#generate {
	display: block;
	margin: 11px 0px;
	background-color: #333333;
	color: #FFFFFF;
	border: none;
	border-radius: 5px;
	padding: 12px 17px;
	font-size: 14px;
	cursor: pointer;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

/* source code (textarea) */
#source-code {
	background-color: #CCCED1;
	border: 1px solid #CCCED1;
	width: 100%;
	outline: none;
}

a { color: #0096FF; }
/* CKEDITOR 5 */

.img-hover {
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 8px; /* opcional, suaviza bordes */
}

.img-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* ESTILOS PARA HACER RESPONSIVO EL VIDEO DE TIKTOK */
.tiktok-embed {
    max-width: 100% !important; /* Asegura que no se desborde en contenedores pequeños */
    min-width: 0 !important;   /* Anula el ancho mínimo que impone TikTok */
    margin: 20px auto !important; /* Centra el video en el artículo */
}


/* --- NUEVOS ESTILOS PARA LA SECCIÓN DE EQUIPO --- */
.team-card {
    width: 100%;
    max-width: 300px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 15px; /* Bordes redondeados para un look suave */
    overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.card-img-container {
    overflow: hidden; /* Contiene el efecto de zoom de la imagen */
}

.team-card .card-img-top {
    transition: transform 0.4s ease;
}

.team-card:hover .card-img-top {
    transform: scale(1.05); /* Sutil efecto de zoom en la imagen */
}

/* El overlay para las redes sociales */
.card-img-overlay {
    background: rgba(0, 0, 0, 0.6);
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.4s ease;
    display: flex; /* Centra el contenido */
    align-items: center;
    justify-content: center;
}

/* Solo muestra el overlay en hover en pantallas que no son táctiles */
@media (hover: hover) and (pointer: fine) {
    .team-card:hover .card-img-overlay {
        opacity: 1; /* Se muestra al pasar el cursor */
    }
}

.card-img-overlay .social-links a {
    color: white;
    font-size: 1.5rem; /* Iconos más grandes y visibles */
    margin: 0 10px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.card-img-overlay .social-links a:hover {
    transform: scale(1.2); /* Efecto al pasar sobre el ícono */
}

.team-card .card-body {
    padding: 1.25rem;
}

.team-card .card-title {
    font-size: 1.2rem;
    font-weight: 600;
}

  .registro-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .registro-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.25) !important;
  }


  .fact-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .fact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
  }


/*************************/

        /*
         * Organigrama con 7 Niveles Jerárquicos
         * Sistema de redimensionamiento automático + zoom inicial optimizado
         * Bootstrap 4.3.x compatible
         */

        /* Ajustes para estructura Bootstrap mejorados */
        #actividades .page-container {
            max-width: none !important;
            width: 100% !important;
            border-radius: 13px;
        }

        #actividades #chart-container {
            width: 100% !important;
            max-width: none !important;
        }

        /* Asegurar que el organigrama use todo el ancho disponible sin desbordarse */
        .orgchart {
            width: 100% !important;
            max-width: none !important;
        }

        /* Contenedor principal responsivo */
        .page-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            padding: 10px;
        }

        /* Controles responsivos */
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 20px;
            padding: 15px;
        }

        .control-group {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* Contenedor del organigrama con zoom inteligente */
        #chart-container {
            position: relative;
            flex: 1;
            min-height: 400px;
            border: 0;
            border-radius: 10px;
            overflow: auto;
            background: white;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 30px 20px;
            transition: all 0.3s ease;
        }

        /* NUEVO: Estados del contenedor según zoom */
        #chart-container.zooming {
            align-items: center;
            justify-content: center;
        }

        #chart-container.zoom-small {
            align-items: center;
            justify-content: center;
            padding: 10px;
        }

        /* Indicator de carga */
        .loading-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            z-index: 1000;
            background: rgba(255,255,255,0.95);
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ZOOM CORREGIDO: Estilos del organigrama con zoom inteligente */
        .orgchart {
            display: block;
            position: relative;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            transition: all 0.5s ease;
            transform-origin: center center;
            max-width: 100%;
            min-width: fit-content;
        }

        .orgchart.horizontal {
            width: 100%;
            text-align: center;
        }

        .orgchart.vertical {
            width: auto;
            text-align: left;
        }

        .orgchart .hidden {
            display: none !important;
        }

        /* Contenedor de nodos con distribución perfecta CORREGIDO */
        .orgchart .nodes {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
            transition: all 0.4s ease;
            max-width: 100%;
        }

        .orgchart.horizontal .nodes {
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 10px;
            width: 100%;
            max-width: 100%;
        }

        .orgchart.vertical .nodes {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
            padding-left: 30px;
            flex-wrap: nowrap;
        }

        /* Estados de nodos colapsados */
        .orgchart .nodes.collapsed {
            display: none !important;
        }

        /* Jerarquía con centrado perfecto CORREGIDO */
        .orgchart .hierarchy {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.4s ease;
            max-width: 100%;
        }

        .orgchart.vertical .hierarchy {
            align-items: flex-start;
            width: 100%;
        }

        /* Estados de jerarquía colapsada */
        .orgchart .hierarchy.collapsed > .nodes {
            display: none !important;
        }

        /* Líneas de conexión inteligentes - color negro */
        .orgchart.horizontal .hierarchy::before {
            content: "";
            position: absolute;
            top: -15px;
            height: 2px;
            background-color: #000;
            z-index: 0;
        }

        /* Línea horizontal superior para conectar hermanos */
        .orgchart.horizontal .nodes > .hierarchy:not(:only-child)::before {
            width: 100%;
            left: 0;
        }

        .orgchart.horizontal .nodes > .hierarchy:first-child:not(:only-child)::before {
            width: 50%;
            left: 50%;
        }

        .orgchart.horizontal .nodes > .hierarchy:last-child:not(:only-child)::before {
            width: 50%;
            left: 0;
        }

        .orgchart.horizontal .nodes > .hierarchy:only-child::before {
            width: 2px;
            left: calc(50% - 1px);
        }

        /* Línea vertical desde el padre */
        .orgchart.horizontal .hierarchy > .node:has(+ .nodes)::after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: calc(50% - 1px);
            width: 2px;
            height: 13px;
            background-color: #000;
            z-index: 0;
        }

        .orgchart.horizontal .hierarchy.collapsed > .node::after {
            display: none;
        }

        /* Líneas para layout vertical */
        .orgchart.vertical .hierarchy::before {
            content: "";
            position: absolute;
            left: -20px;
            top: 35px;
            width: 18px;
            height: 2px;
            background-color: #000;
            z-index: 0;
        }

        .orgchart.vertical .hierarchy::after {
            content: "";
            position: absolute;
            left: -20px;
            top: 35px;
            width: 2px;
            background-color: #000;
            z-index: 0;
        }

        .orgchart.vertical .nodes > .hierarchy:first-child::after {
            height: calc(100% - 35px);
        }

        .orgchart.vertical .nodes > .hierarchy:not(:first-child):not(:last-child)::after {
            height: 100%;
            top: 0;
        }

        .orgchart.vertical .nodes > .hierarchy:last-child::after {
            height: 35px;
            top: 0;
        }

        .orgchart.vertical .nodes > .hierarchy:only-child::before,
        .orgchart.vertical .nodes > .hierarchy:only-child::after {
            content: none;
        }

        /* Estilos de nodos ADAPTATIVO INTELIGENTE */
        .orgchart .node {
            position: relative;
            display: inline-block;
            margin: 0 0 30px 0;
            padding: 8px;
            border: 2px solid transparent;
            text-align: center;
            transition: all 0.3s ease;
            z-index: 10;
            cursor: pointer;
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            font-size: calc(0.7rem + 0.3vw) !important;
            min-width: 140px;
            max-width: 220px;
            width: auto;
            flex: 0 1 auto;
        }

		.orgchart .node:hover {
			transform: translateY(-3px);
			box-shadow: 0 12px 35px rgba(0,0,0,0.25);
			border-color: rgba(0,123,255,0.3);
		}

        .orgchart .node.focused {
            box-shadow: 0 0 0 3px rgba(0,123,255,0.3);
            transform: scale(1.02);
        }

        /* Estados especiales para nodos expandidos/colapsados */
        .orgchart .node.has-children.expanded .bottomEdge .oci-chevron-down::before {
            content: "▼";
            color: #28a745;
        }

        .orgchart .node.has-children.collapsed .bottomEdge .oci-chevron-down::before {
            content: "▶";
            color: #dc3545;
        }

        /* Títulos jerárquicos diferenciados para 7 niveles ADAPTATIVOS */
        .orgchart .node .title {
            box-sizing: border-box;
            width: 100%;
            min-width: 140px;
            max-width: 220px;
            text-align: center;
            font-size: 1rem;
            font-weight: bold;
            padding: 12px 8px;
            min-height: 40px;
            line-height: 1.3;
            background: linear-gradient(135deg, #e9a401 0%, #ff7700 100%);
            color: #fff;
            border-radius: 8px 8px 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(255,153,0,0.3);
        }

        /* Nivel 2 - Azul */
        .orgchart .node .title2 {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            box-shadow: 0 2px 10px rgba(59,130,246,0.3);
            padding: 8px 6px;
            color: #fff !important;
            width: 100%;
        }

        /* Nivel 3 - Verde */
        .orgchart .node .title3 {
            background: linear-gradient(135deg, #166534 0%, #22c55e 100%);
            box-shadow: 0 2px 10px rgba(34,197,94,0.3);
            padding: 8px 6px;
            color: #fff !important;
            width: 100%;
        }

        /* Nivel 4 - Púrpura */
        .orgchart .node .title4 {
            background: linear-gradient(135deg, #7c2d12 0%, #a855f7 100%);
            box-shadow: 0 2px 10px rgba(168,85,247,0.3);
            padding: 8px 6px;
            color: #fff !important;
            width: 100%;
        }

        /* Nivel 5 - Rosa */
        .orgchart .node .title5 {
            background: linear-gradient(135deg, #be185d 0%, #ec4899 100%);
            box-shadow: 0 2px 10px rgba(236,72,153,0.3);
            padding: 8px 6px;
            color: #fff !important;
            width: 100%;
        }

        /* Nivel 6 - Índigo */
        .orgchart .node .title6 {
            background: linear-gradient(135deg, #312e81 0%, #6366f1 100%);
            box-shadow: 0 2px 10px rgba(99,102,241,0.3);
            padding: 8px 6px;
            color: #fff !important;
            width: 100%;
        }

        /* Nivel 7 - Teal */
        .orgchart .node .title7 {
            background: linear-gradient(135deg, #134e4a 0%, #14b8a6 100%);
            box-shadow: 0 2px 10px rgba(20,184,166,0.3);
            padding: 8px 6px;
            color: #fff !important;
            width: 100%;
        }

        .orgchart .node .content {
            box-sizing: border-box;
            width: 100%;
            min-width: 140px;
            max-width: 220px;
            min-height: 70px;
            padding: 10px 8px;
            font-size: 0.85rem;
            border: 1px solid #ddd;
            border-width: 0 2px 2px 2px;
            border-radius: 0 0 8px 8px;
            background-color: #fff;
            color: #333;
            line-height: 1.4;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        /* Contenidos diferenciados por nivel ADAPTATIVOS */
        .orgchart .node .content2 {
            border-color: #3b82f6;
            border: 1px solid #3b82f6;
            border-width: 0 2px 2px 2px;
            border-radius: 0 0 8px 8px;
			min-height: 60px;
            font-size: 0.85rem;
            padding: 10px 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 100%;
        }

        .orgchart .node .content3 {
            border-color: #22c55e;
            border: 1px solid #22c55e;
            border-width: 0 2px 2px 2px;
            border-radius: 0 0 8px 8px;
			min-height: 60px;
            font-size: 0.85rem;
            padding: 10px 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 100%;
        }

        .orgchart .node .content4 {
            border-color: #a855f7;
            border: 1px solid #a855f7;
            border-width: 0 2px 2px 2px;
            border-radius: 0 0 8px 8px;
            min-height: 50px;
			height: 60px;
            font-size: 0.85rem;
            padding: 10px 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 100%;
        }

        .orgchart .node .content5 {
            border-color: #ec4899;
            border: 1px solid #ec4899;
            border-width: 0 2px 2px 2px;
            border-radius: 0 0 8px 8px;
            min-height: 60px;
            font-size: 0.85rem;
            padding: 10px 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 100%;
        }

        .orgchart .node .content6 {
            border-color: #6366f1;
            border: 1px solid #6366f1;
            border-width: 0 2px 2px 2px;
            border-radius: 0 0 8px 8px;
            min-height: 60px;
            font-size: 0.85rem;
            padding: 10px 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 100%;
        }

        .orgchart .node .content7 {
            border-color: #14b8a6;
            border: 1px solid #14b8a6;
            border-width: 0 2px 2px 2px;
            border-radius: 0 0 8px 8px;
            min-height: 50px;
            font-size: 0.85rem;
            padding: 10px 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 100%;
        }

        /* Controles de navegación mejorados */
        .orgchart .node .edge {
            position: absolute;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0;
            background: rgba(0,123,255,0.1);
            border-radius: 6px;
            border: 2px solid rgba(0,123,255,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .orgchart .node:hover .edge {
            opacity: 1;
        }

        .orgchart .node .edge:hover {
            background: rgba(0,123,255,0.3);
            border-color: rgba(0,123,255,0.6);
            transform: scale(1.1);
        }

        .orgchart .node .verticalEdge {
            width: 30px;
            height: 20px;
            left: calc(50% - 15px);
        }

        .orgchart .node .topEdge {
            top: -12px;
        }

        .orgchart .node .bottomEdge {
            bottom: -12px;
        }

        .orgchart .node .horizontalEdge {
            width: 20px;
            height: 30px;
            top: calc(50% - 15px);
        }

        .orgchart .node .rightEdge {
            right: -12px;
        }

        .orgchart .node .leftEdge {
            left: -12px;
        }

        /* Animaciones para expandir/contraer */
        .orgchart .slide-down {
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.4s ease;
        }

        .orgchart .slide-up {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }

        .orgchart .fade-in {
            opacity: 1;
            transform: translateY(0);
        }

        .orgchart .fade-out {
            opacity: 0;
            transform: scale(0.8);
        }

        /* NUEVO: Indicador de nivel de zoom */
        .zoom-indicator {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            z-index: 1000;
            font-family: monospace;
            display: none;
        }

        .zoom-indicator.active {
            display: block;
        }

        /* Responsive CORREGIDO según Bootstrap 4.3.x */

        /* BREAKPOINT CRÍTICO: 768px Bootstrap sm */
        @media (max-width: 767.98px) {
            .orgchart {
                width: auto !important;
                text-align: left !important;
            }

            .orgchart.horizontal {
                display: none;
            }

            .orgchart.vertical {
                display: block;
            }

            .page-container {
                padding: 5px;
            }

            .controls {
                flex-direction: column;
                padding: 10px;
                margin-bottom: 10px;
            }

            .btn {
                padding: 12px 20px;
                font-size: 16px;
            }

            #chart-container {
                min-height: 400px;
                padding: 10px 5px;
            }

            .orgchart .node {
                min-width: 160px !important;
                max-width: 200px !important;
            }

            .orgchart .node .content, .orgchart .node .content2, .orgchart .node .content3,
            .orgchart .node .content4, .orgchart .node .content5, .orgchart .node .content6,
            .orgchart .node .content7 {
                font-size: 0.8rem;
            }
        }

        /* Mobile Landscape dentro del rango crítico */
        @media (max-width: 767.98px) and (orientation: landscape) {
            #chart-container {
                min-height: 300px;
                padding: 5px;
            }

            .orgchart .node {
                min-width: 140px !important;
                max-width: 180px !important;
            }

            .orgchart .node .content, .orgchart .node .content2, .orgchart .node .content3,
            .orgchart .node .content4, .orgchart .node .content5, .orgchart .node .content6,
            .orgchart .node .content7 {
                font-size: 0.75rem;
            }
        }

        /* Tablet Portrait - LAYOUT HORIZONTAL ADAPTATIVO */
        @media (min-width: 768px) and (max-width: 991.98px) {
            .orgchart .node {
                min-width: 150px !important;
                max-width: 190px !important;
            }

            .orgchart.horizontal .nodes {
                gap: 8px;
            }
        }

        /* RANGO PROBLEMÁTICO CORREGIDO: 992px - 1740px */
        @media (min-width: 992px) and (max-width: 1740px) {
            .orgchart .node {
                /* Tamaños más pequeños en el rango problemático */
                min-width: 140px !important;
                max-width: 180px !important;
            }

            .orgchart.horizontal .nodes {
                gap: 8px !important; /* Gap reducido */
                flex-wrap: wrap !important; /* Forzar wrap si es necesario */
            }

            /* CORRECCIÓN ADICIONAL: Padding reducido en el contenedor */
            #chart-container {
                padding: 20px 10px !important;
            }
        }

        /* Desktop - Layout óptimo SOLO ARRIBA DE 1740px */
        @media (min-width: 1741px) {
            .orgchart .node {
                min-width: 180px !important;
                max-width: 220px !important;
            }

            .orgchart.horizontal .nodes {
                gap: 15px;
            }
        }

        /* Estados especiales */
        .orgchart .node.allowedDrop {
            border-color: #28a745;
            background-color: rgba(40,167,69,0.1);
        }

        /* Transiciones de layout */
        .layout-transition {
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Información del dispositivo */
        .device-info {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.85);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 11px;
            z-index: 1000;
            font-family: monospace;
        }

        /* Iconos personalizados mejorados */
        .oci-chevron-up::before {
            content: "▲";
            color: #007bff;
            font-size: 14px;
        }
        .oci-chevron-down::before {
            content: "▼";
            color: #007bff;
            font-size: 14px;
        }
        .oci-chevron-left::before {
            content: "◀";
            color: #007bff;
            font-size: 14px;
        }
        .oci-chevron-right::before {
            content: "▶";
            color: #007bff;
            font-size: 14px;
        }
        .oci-plus-square::before {
            content: "⊞";
            background: #28a745;
            color: #fff;
            padding: 3px;
            border-radius: 3px;
        }
        .oci-minus-square::before {
            content: "⊟";
            background: #dc3545;
            color: #fff;
            padding: 3px;
            border-radius: 3px;
        }

		/* Estilos para imágenes de perfil MEJORADOS */
		.orgchart .node .profile-container {
			display: flex;
			align-items: center;
            gap: calc(5px + 0.3vw) !important;
            padding: calc(5px + 0.2vw) !important;
			text-align: center;
			margin-bottom: 8px;
			min-height: 60px;
			width: 100%;
		}

		.orgchart .node .profile-image {
			width: 45px;
			height: 45px;
			border-radius: 50%;
			object-fit: cover;
			border: 2px solid #fff;
			box-shadow: 0 2px 6px rgba(0,0,0,0.2);
			flex-shrink: 0;
            /* Mejorar la carga de imágenes */
            background-color: #f8f9fa;
            transition: all 0.3s ease;
		}

        /* Estados de carga de imagen */
        .orgchart .node .profile-image.loading {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .orgchart .node .profile-image.error {
            display: none !important;
        }

		.orgchart .node .profile-icon {
			width: 45px;
			height: 45px;
			border-radius: 50%;
			background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 18px;
			border: 2px solid #fff;
			box-shadow: 0 2px 6px rgba(0,0,0,0.2);
			flex-shrink: 0;
            /* Mejorar visualización del icono */
            transition: all 0.3s ease;
		}

        /* Asegurar que FontAwesome funcione */
        .orgchart .node .profile-icon i {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 900 !important;
            font-style: normal !important;
            display: inline-block !important;
        }

        /* Fallback si FontAwesome no carga */
        .orgchart .node .profile-icon.fallback::before {
            content: "👤";
            font-size: 20px;
            font-family: system-ui, -apple-system, sans-serif;
        }

		.orgchart .node .profile-info {
			flex: 1;
			text-align: left;
			min-width: 0;
			width: 100%;
		}

		.orgchart .node .profile-name {
			font-weight: bold;
			font-size: calc(0.8rem + 0.2vw) !important;
			color: #333;
			margin: 0;
			line-height: 1.2;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.orgchart .node .profile-title {
			font-size: calc(0.65rem + 0.15vw) !important;
			color: #666;
			margin: 2px 0 0 0;
			line-height: 1.1;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			white-space: normal;
		}

		/* Ajustes responsive para imágenes CORREGIDOS */
		@media (max-width: 767.98px) {
			.orgchart .node .profile-container {
				gap: 8px;
				padding: 6px;
				min-height: 55px;
			}

			.orgchart .node .profile-image,
			.orgchart .node .profile-icon {
                width: calc(35px + 0.5vw) !important;
                height: calc(35px + 0.5vw) !important;
			}

            .orgchart .node .profile-icon {
                font-size: 16px !important;
            }

			.orgchart .node .profile-name {
				font-size: 0.8rem;
			}

			.orgchart .node .profile-title {
				font-size: 0.7rem;
			}
		}

        /* CORRECCIÓN ADICIONAL: Ajustes para imágenes en rango problemático */
        @media (min-width: 992px) and (max-width: 1740px) {
            .orgchart .node .profile-image,
            .orgchart .node .profile-icon {
                width: 40px !important;
                height: 40px !important;
            }

            .orgchart .node .profile-icon {
                font-size: 16px !important;
            }

            .orgchart .node .profile-container {
                gap: 6px !important;
                padding: 6px !important;
                min-height: 55px;
            }

            .orgchart .node .profile-name {
                font-size: 0.75rem !important;
            }

            .orgchart .node .profile-title {
                font-size: 0.65rem !important;
            }
        }

        /* Popover personalizado para Bootstrap 5.3.x */
        .member-popover {
            max-width: 300px !important;
            border: none !important;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
            border-radius: 12px !important;
        }

        .member-popover .popover-header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
            color: white !important;
            border-radius: 12px 12px 0 0 !important;
            padding: 12px 15px !important;
            font-weight: bold !important;
            text-align: center !important;
            border-bottom: none !important;
        }

        .member-popover .popover-body {
            padding: 15px !important;
            text-align: center !important;
            background: white !important;
            border-radius: 0 0 12px 12px !important;
        }

        .member-popover .member-photo {
            width: 200px !important;
            height: 200px !important;
            border-radius: 12px !important;
            object-fit: cover !important;
            border: 3px solid #ecf0f1 !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
            margin: 0 auto !important;
            display: block !important;
        }

        /* CAMBIO: popover-arrow en lugar de arrow para Bootstrap 5 */
        .member-popover .popover-arrow::before {
            border-color: transparent !important;
        }

        .member-popover .popover-arrow::after {
            border-color: #2c3e50 transparent !important;
        }


			/* Contenedor principal de la ventana de cookies */
			#cookieConsent {
				display: none;
				position: fixed !important;
				top: 50% !important;
				left: 50% !important;
				transform: translate(-50%, -50%) !important;
				width: 90% !important;
				max-width: 800px !important;
				height: auto !important;
				max-height: 80vh !important;
				background-color: #ffff66 !important;
				color: #000 !important;
				border: 3px solid #000 !important;
				border-radius: 12px !important;
				box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5) !important;
				z-index: 99999 !important;
				overflow: visible !important;
				box-sizing: border-box !important;
				padding: 0 !important;
				margin: 0 !important;
			}

			/* CRÍTICO: Asegurar flexbox */
			#cookieConsent {
				display: flex !important;
				flex-direction: column !important;
			}

			/* Área de texto con scroll */
			#textCookie {
				flex: 1 1 auto !important;
				overflow-y: auto !important;
				overflow-x: hidden !important;
				padding: 20px !important;
				max-height: calc(80vh - 110px) !important;
				box-sizing: border-box !important;
				word-wrap: break-word !important;
				word-break: break-word !important;
			}

			#textCookie p {
				margin: 0 !important;
				padding: 0 !important;
				line-height: 1.6 !important;
				color: #000 !important;
				font-size: 16px !important;
				text-align: justify !important;
			}

			/* Área de botones - SIEMPRE VISIBLE CON !IMPORTANT */
			#buttonsCookie {
				flex: 0 0 auto !important;
				padding: 15px !important;
				background-color: #ffee33 !important;
				border-top: 2px solid #000 !important;
				display: flex !important;
				justify-content: center !important;
				gap: 10px !important;
				flex-wrap: wrap !important;
				box-sizing: border-box !important;
				min-height: 70px !important;
			}

			#buttonsCookie button {
				padding: 12px 24px !important;
				font-size: 15px !important;
				font-weight: bold !important;
				border: 2px solid #000 !important;
				border-radius: 6px !important;
				cursor: pointer !important;
				transition: all 0.3s ease !important;
				background-color: #000 !important;
				color: #ffff66 !important;
				flex: 1 1 auto !important;
				min-width: 180px !important;
				max-width: 100% !important;
			}

			#buttonsCookie button:hover {
				background-color: #333 !important;
				color: #fff !important;
				transform: scale(1.05) !important;
			}

			/* Scrollbar personalizado para webkit browsers */
			#textCookie::-webkit-scrollbar {
				width: 10px;
			}

			#textCookie::-webkit-scrollbar-track {
				background: #ffee33;
				border-radius: 10px;
			}

			#textCookie::-webkit-scrollbar-thumb {
				background: #000;
				border-radius: 10px;
			}

			#textCookie::-webkit-scrollbar-thumb:hover {
				background: #333;
			}

			/* Responsive para tablets */
			@media (max-width: 768px) {
				#cookieConsent {
					width: 92% !important;
					max-width: 600px !important;
					max-height: 75vh !important;
				}

				#textCookie {
					max-height: calc(75vh - 110px) !important;
					padding: 15px !important;
				}

				#textCookie p {
					font-size: 14px !important;
				}

				#buttonsCookie {
					padding: 12px !important;
					gap: 8px !important;
					min-height: 65px !important;
				}

				#buttonsCookie button {
					padding: 10px 18px !important;
					font-size: 14px !important;
					min-width: 140px !important;
				}
			}

			/* Responsive para móviles */
			@media (max-width: 480px) {
				#cookieConsent {
					width: 95% !important;
					max-width: 95% !important;
					max-height: 70vh !important;
					border-radius: 10px !important;
				}

				#textCookie {
					max-height: calc(70vh - 105px) !important;
					padding: 12px !important;
				}

				#textCookie p {
					font-size: 13px !important;
					line-height: 1.5 !important;
				}

				#buttonsCookie {
					padding: 10px !important;
					gap: 8px !important;
					flex-direction: column !important;
					min-height: 95px !important;
				}

				#buttonsCookie button {
					padding: 12px 16px !important;
					font-size: 14px !important;
					width: 100% !important;
					min-width: unset !important;
					max-width: 100% !important;
				}
			}

			/* Responsive para pantallas muy pequeñas */
			@media (max-width: 360px) {
				#cookieConsent {
					width: 96% !important;
					max-height: 65vh !important;
				}

				#textCookie {
					max-height: calc(65vh - 100px) !important;
					padding: 10px !important;
				}

				#textCookie p {
					font-size: 12px !important;
					line-height: 1.4 !important;
				}

				#buttonsCookie {
					padding: 8px !important;
					min-height: 90px !important;
				}

				#buttonsCookie button {
					font-size: 13px !important;
					padding: 10px 14px !important;
				}
			}

			/* Ajuste para orientación horizontal en móviles */
			@media (max-width: 768px) and (orientation: landscape) {
				#cookieConsent {
					max-height: 85vh !important;
				}

				#textCookie {
					max-height: calc(85vh - 100px) !important;
					padding: 10px !important;
				}

				#textCookie p {
					font-size: 12px !important;
				}

				#buttonsCookie {
					padding: 8px !important;
					min-height: 65px !important;
				}

				#buttonsCookie button {
					padding: 8px 14px !important;
					font-size: 13px !important;
				}
			}

			/* Estilos para el div de cookies aceptadas */
			#cookiesAceptadas {
				position: fixed !important;
				bottom: 20px !important;
				right: 20px !important;
				background-color: #ffff66 !important;
				color: #000 !important;
				border: 2px solid #000 !important;
				border-radius: 10px !important;
				padding: 15px !important;
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
				z-index: 9998 !important;
				max-width: 300px !important;
				box-sizing: border-box !important;
			}

			#cookiesAceptadas button {
				margin-top: 10px !important;
				padding: 10px 16px !important;
				background-color: #000 !important;
				color: #ffff66 !important;
				border: 2px solid #000 !important;
				border-radius: 5px !important;
				cursor: pointer !important;
				font-weight: bold !important;
				width: 100% !important;
			}

			#cookiesAceptadas button:hover {
				background-color: #333 !important;
				color: #fff !important;
			}

			/* Ajuste para cookies aceptadas en móviles */
			@media (max-width: 480px) {
				#cookiesAceptadas {
					right: 10px !important;
					bottom: 10px !important;
					max-width: calc(100vw - 20px) !important;
					padding: 12px !important;
				}
			}


.logo30x30 {
	width: 30px;
	height: 30px;
}

.small, small {
    font-size: .675em;
}
.counter-wrap {
    display: inline-flex;
    align-items: flex-start; /* mantiene ambos a la misma altura visual */
}

.plus-sign {
    font-weight: bold;
    margin-left: 2px;
    line-height: 1; /* evita que se baje */
}
/* ========================================
   HERO SECTION OPTIMIZADO
   ======================================== */

.hero-section-optimizado {
    padding: 1rem 2rem 3rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.hero-section-optimizado::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23FCD116" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>') no-repeat top center;
    background-size: cover;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-badge .badge-pill {
    display: inline-block;
    background: linear-gradient(135deg, #FCD116 0%, #f0c330 100%);
    color: #000;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(252, 209, 22, 0.3);
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #2d3748;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: #4a5568;
    line-height: 1.6;
}

.hero-image {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    animation: float-image 6s ease-in-out infinite;
}

@keyframes float-image {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* ========================================
   CONTADOR REGRESIVO
   ======================================== */

.countdown-container {
    background: linear-gradient(135deg, #ff9900 0%, #000099 70%, #ff0000 100%);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.countdown-container2 {
    padding: 20px 0;
}
.countdown-label {
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.time-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #FCD116;
    line-height: 1;
    font-family: 'Arial', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.time-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    margin-top: 0.25rem;
    font-weight: 500;
}

.time-separator {
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
    padding: 0 0.25rem;
}

/* Responsive del contador */
@media (max-width: 576px) {
    .time-unit {
        min-width: 60px;
    }

    .time-number {
        font-size: 2rem;
    }

    .time-separator {
        font-size: 1.5rem;
    }
}

/* ========================================
   BOTONES CTA DEL HERO
   ======================================== */

.btn-primary-hero {
    background: linear-gradient(135deg, #FCD116 0%, #f0c330 100%);
    border: none;
    color: #000;
    font-weight: 700;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(252, 209, 22, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.btn-primary-hero:hover::before {
    left: 100%;
}

.btn-primary-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(252, 209, 22, 0.5);
    color: #000;
}

.btn-outline-hero {
    background: transparent;
    border: 2px solid #667eea;
    color: #667eea;
    font-weight: 600;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-outline-hero:hover {
    background: #667eea;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.hero-trust {
    margin-top: 2rem;
}

.hero-trust .text-muted {
    font-size: 0.9rem;
}

/* ========================================
   SECCIÓN DE VIDEO
   ======================================== */

.video-section {
    background-color: #f8f9fa;
}

.video-wrapper {
    position: relative;
    overflow: hidden;
    background: #000;
}

.video-wrapper iframe {
    border: none;
}

.stat-box {
    padding: 1rem;
    transition: transform 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
}

.stat-icon img {
    max-width: 60px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.stat-number {
    color: #FCD116;
    margin: 0.5rem 0;
}

.stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================
   SECCIÓN DE REGISTRO OPTIMIZADA
   ======================================== */

.registro-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
}

.registro-card-optimizada {
    border-radius: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.registro-card-optimizada::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(252, 209, 22, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.registro-card-optimizada:hover::before {
    opacity: 1;
}

.registro-card-optimizada:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    border-color: #FCD116;
}

.popular-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #FCD116 0%, #f8e092 100%);
    color: #000;
    padding: 0.5rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(252, 209, 22, 0.4);
    animation: pulse-badge 2s ease-in-out infinite;
}

.registro-icon {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: rgba(252, 209, 22, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.beneficios-lista {
    text-align: left;
}

.beneficio-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.beneficio-item i {
    font-size: 1.2rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.beneficio-item span {
    flex: 1;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
}

.btn-registro-colombia,
.btn-registro-exterior {
    background: linear-gradient(135deg, #FCD116 0%, #f0c330 100%);
    border: none;
    color: #000;
    font-size: 1.2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(252, 209, 22, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-registro-colombia::before,
.btn-registro-exterior::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.btn-registro-colombia:hover::before,
.btn-registro-exterior:hover::before {
    left: 100%;
}

.btn-registro-colombia:hover,
.btn-registro-exterior:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(252, 209, 22, 0.6);
    color: #000;
}

/* ========================================
   SECCIÓN "¿POR QUÉ AHORA?"
   ======================================== */

.porque-ahora-section {
    background: #f8f9fa;
}

.porque-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.porque-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border-color: #FCD116;
}

.porque-icon {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(252, 209, 22, 0.1) 0%, rgba(252, 209, 22, 0.2) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.porque-icon i {
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ========================================
   SECCIÓN "CÓMO FUNCIONA"
   ======================================== */

.como-funciona-section {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.como-funciona-section::before {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(180deg, #f8f9fa 0%, transparent 100%);
    pointer-events: none;
}

.paso-card {
    position: relative;
    z-index: 1;
}

.paso-numero {
    position: relative;
    margin-bottom: 1rem;
}

.numero-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.paso-icon {
    margin-bottom: 1rem;
}

.paso-icon i {
    color: #667eea;
    transition: transform 0.3s ease;
}

.paso-card:hover .paso-icon i {
    transform: scale(1.2);
}

.animate-bounce {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* ========================================
   SECCIÓN DE IMPACTO
   ======================================== */

.impacto-section {
    background: #f8f9fa;
}

.impacto-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.impacto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border-color: #FCD116;
}

.impacto-card i {
    transition: transform 0.3s ease;
}

.impacto-card:hover i {
    transform: scale(1.1);
}

/* ========================================
   SECCIÓN DE EQUIPO
   ======================================== */

.team-card {
    transition: all 0.3s ease;
    padding: 1rem;
}

.team-card:hover {
    transform: translateY(-10px);
}

.team-img-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.team-img {
    transition: transform 0.3s ease;
}

.team-card:hover .team-img {
    transform: scale(1.1);
}

.team-social a {
    display: inline-block;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.team-social a:hover {
    transform: scale(1.3);
}

/* ========================================
   SECCIÓN DE GALERÍA
   ======================================== */

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* ========================================
   SECCIÓN DE CONTACTO
   ======================================== */

.contacto-cta {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.contacto-metodo {
    padding: 1.5rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.contacto-metodo:hover {
    background: #f8f9fa;
    transform: translateY(-5px);
}

.contacto-metodo i {
    transition: transform 0.3s ease;
}

.contacto-metodo:hover i {
    transform: scale(1.2);
}

.social-cta .btn {
    transition: all 0.3s ease;
}

.social-cta .btn:hover {
    transform: scale(1.1);
}

/* ========================================
   TÍTULOS DE SECCIONES
   ======================================== */

.section-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    position: relative;
    display: inline-block;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 991px) {
    .hero-section-optimizado {
        padding: 3rem 1.5rem 2rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .countdown-container {
        padding: 1rem;
    }

    .time-number {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .hero-ctas {
        flex-direction: column !important;
    }

    .hero-ctas .btn {
        width: 100%;
    }

    .registro-card-optimizada {
        margin-bottom: 2rem;
    }

    .popular-badge {
        top: 10px;
        right: 10px;
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 576px) {
    .beneficio-item {
        font-size: 0.9rem;
    }

    .btn-registro-colombia,
    .btn-registro-exterior {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
}

/* ========================================
   ANIMACIONES ADICIONALES
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* ========================================
   MEJORAS DE ACCESIBILIDAD
   ======================================== */

.btn:focus,
.form-control:focus {
    outline: 3px solid rgba(252, 209, 22, 0.5);
    outline-offset: 2px;
}

/* Asegurar contraste adecuado */
.text-muted {
    color: #6c757d !important;
}

/* ========================================
   FIN DE ESTILOS ADICIONALES
   ======================================== */

/* --- Sección contenedora principal --- */
.scroll_empresas_seccion {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3rem 0;
    margin: 3rem 0;
    overflow: hidden;
    position: relative;
}

.scroll_empresas_titulo {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Contenedor del scroll --- */
.scroll_empresas_container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* --- Inner container con los logos --- */
.scroll_empresas_inner {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: 2rem 0;

    /* Envolver cuando NO está animado (fallback y accesibilidad) */
    flex-wrap: wrap;
    justify-content: center;
}

/* --- Estado animado: scroll infinito activado --- */
.scroll_empresas_container[data-animated="true"] {
    overflow: hidden;

    /* Máscara de gradiente para fade suave en los bordes */
    -webkit-mask: linear-gradient(
        90deg,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
    mask: linear-gradient(
        90deg,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
}

.scroll_empresas_container[data-animated="true"] .scroll_empresas_inner {
    /* Quitar wrap cuando está animado */
    flex-wrap: nowrap;
    justify-content: flex-start;

    /* Ancho infinito para permitir scroll continuo */
    width: max-content;

    /* Animación suave y continua */
    animation: scroll_empresas_slide linear infinite;
    animation-play-state: running;

    /* Hardware acceleration para mejor performance */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* --- Animación de scroll horizontal --- */
@keyframes scroll_empresas_slide {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Mover exactamente la mitad del ancho (donde empiezan los duplicados) */
        transform: translateX(calc(-50%));
    }
}

/* --- Control de velocidades --- */
.scroll_empresas_container[data-speed="fast"] .scroll_empresas_inner {
    animation-duration: 20s;
}

.scroll_empresas_container[data-speed="slow"] .scroll_empresas_inner {
    animation-duration: 60s;
}

.scroll_empresas_container[data-speed="normal"] .scroll_empresas_inner {
    animation-duration: 40s;
}

/* --- Items individuales (logos) --- */
.scroll_empresa_item {
    /* Flex item que no se encoge */
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 180px;
    height: 180px;
    padding: 1.5rem;

    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;

    /* Prevenir selección de texto */
    user-select: none;
    -webkit-user-select: none;
}

/* --- Efecto hover mejorado --- */
.scroll_empresa_item:hover {
    transform: scale(1.15) translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #0d6efd;
    z-index: 100;
}

/* --- Enlace sin decoración --- */
.scroll_empresa_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* --- Logo de la empresa --- */
.scroll_empresa_logo {
    max-width: 140px;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;

    /* Mejorar renderizado de imágenes */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.scroll_empresa_item:hover .scroll_empresa_logo {
    filter: brightness(1.1) contrast(1.05);
    transform: scale(1.05);
}

/* --- Badge de tipo de organización --- */
.scroll_empresa_badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #0d6efd;
    color: white;
    font-size: 0.65rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.scroll_empresa_item:hover .scroll_empresa_badge {
    opacity: 1;
}

/* --- Colores según tipo de organización --- */
.scroll_empresa_badge.tipo_fundacion {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
	z-index:99;
}

.scroll_empresa_badge.tipo_corporacion {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
	z-index:99;
}

.scroll_empresa_badge.tipo_empresa {
    background: linear-gradient(135deg, #6f42c1 0%, #59359a 100%);
	z-index:99;
}

.scroll_empresa_badge.tipo_ong {
    background: linear-gradient(135deg, #fd7e14 0%, #ca6510 100%);
	z-index:99;
}

.scroll_empresa_badge.tipo_persona {
    background: linear-gradient(135deg, #149fb8 0%, #4b9812 100%);
	z-index:99;
}
/* --- Popover personalizado --- */
.popover.scroll_empresa_popover {
    max-width: 320px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: none;
}

.popover.scroll_empresa_popover .popover-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    padding: 0.75rem 1rem;
}

.popover.scroll_empresa_popover .popover-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #495057;
    padding: 1rem;
}

/* --- Texto informativo --- */
.scroll_empresas_info_text {
    text-align: center;
    margin-top: 2rem;
    padding: 0 1rem;
}

.scroll_empresas_info_text p {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

/* ====================================================================
   RESPONSIVIDAD OPTIMIZADA
   ==================================================================== */

/* Tablets y pantallas medianas */
@media (max-width: 992px) {
    .scroll_empresas_titulo {
        font-size: 1.75rem;
    }

    .scroll_empresa_item {
        width: 160px;
        height: 160px;
        padding: 1.25rem;
    }

    .scroll_empresa_logo {
        max-width: 120px;
        max-height: 120px;
    }
}

/* Móviles grandes */
@media (max-width: 768px) {
    .scroll_empresas_seccion {
        padding: 2rem 0;
        margin: 2rem 0;
    }

    .scroll_empresas_titulo {
        font-size: 1.5rem;
        padding: 0 1rem;
    }

    .scroll_empresa_item {
        width: 140px;
        height: 140px;
        padding: 1rem;
    }

    .scroll_empresa_logo {
        max-width: 100px;
        max-height: 100px;
    }

    .scroll_empresas_container[data-animated="true"] {
        -webkit-mask: linear-gradient(
            90deg,
            transparent 0%,
            black 3%,
            black 97%,
            transparent 100%
        );
        mask: linear-gradient(
            90deg,
            transparent 0%,
            black 3%,
            black 97%,
            transparent 100%
        );
    }

    .scroll_empresa_badge {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Móviles pequeños */
@media (max-width: 576px) {
    .scroll_empresas_seccion {
        padding: 1.5rem 0;
    }

    .scroll_empresa_item {
        width: 120px;
        height: 120px;
        padding: 0.75rem;
    }

    .scroll_empresa_logo {
        max-width: 80px;
        max-height: 80px;
    }

    .scroll_empresas_inner {
        gap: 1.5rem;
    }
}

/* ====================================================================
   ACCESIBILIDAD Y PREFERENCIAS DE USUARIO
   ==================================================================== */

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .scroll_empresas_inner {
        animation: none !important;
    }

    .scroll_empresa_item,
    .scroll_empresa_logo,
    .scroll_empresa_badge {
        transition: none !important;
    }

    .scroll_empresa_item:hover {
        transform: none;
    }
}

/* Modo alto contraste */
@media (prefers-contrast: high) {
    .scroll_empresa_item {
        border: 2px solid #000;
    }

    .scroll_empresa_item:hover {
        border-color: #0d6efd;
        border-width: 3px;
    }
}

/* ====================================================================
   OPTIMIZACIONES DE PERFORMANCE
   ==================================================================== */

/* Reducir complejidad visual en dispositivos de bajo rendimiento */
@media (max-resolution: 1dppx) {
    .scroll_empresa_item {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .scroll_empresa_item:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
}

/* ====================================================================
   FIN DE LOS ESTILOS OPTIMIZADOS
   ==================================================================== */
   
/* ====================================================================
   ESTILOS PARA TOQUE INTELIGENTE EN SCROLL DE EMPRESAS
   Agregar AL FINAL del archivo 7porcol2.css (después de la línea 6482)
   ==================================================================== */

/* --- Estado de toque activo en dispositivos móviles/tablets --- */
.scroll_empresa_item.touch-active {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 12px 24px rgba(13, 110, 253, 0.4);
    background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 100%);
    border: 3px solid #0d6efd;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Indicador visual de "primer toque" --- */
.scroll_empresa_item.touch-active::after {
    content: "👆 Toca de nuevo para visitar";
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #0d6efd;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    animation: touch-hint-pulse 1.5s ease-in-out infinite;
}

/* --- Animación del indicador de toque --- */
@keyframes touch-hint-pulse {
    0%, 100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.05);
    }
}

/* --- Ajustes para popover en dispositivos táctiles --- */
@media (hover: none) and (pointer: coarse) {
    /* Aumentar el área táctil en móviles */
    .scroll_empresa_item {
        min-width: 120px;
        min-height: 120px;
        padding: 1.5rem;
    }
    
    /* Mejorar visibilidad del popover en móviles */
    .popover.scroll_empresa_popover {
        max-width: 280px;
        font-size: 0.85rem;
    }
    
    .popover.scroll_empresa_popover .popover-body {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Asegurar que el popover esté sobre el indicador de toque */
    .popover {
        z-index: 10000 !important;
    }
}

/* --- Responsive para el indicador de toque en pantallas pequeñas --- */
@media (max-width: 480px) {
    .scroll_empresa_item.touch-active::after {
        font-size: 0.7rem;
        padding: 5px 10px;
        bottom: -32px;
    }
}

/* --- Ocultar el indicador en desktop (solo para dispositivos táctiles) --- */
@media (hover: hover) and (pointer: fine) {
    .scroll_empresa_item.touch-active::after {
        display: none;
    }
    
    /* En desktop, mantener el comportamiento hover normal */
    .scroll_empresa_item.touch-active {
        /* Usar los estilos de hover normales en desktop */
        transform: scale(1.15) translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        border: 2px solid #0d6efd;
    }
}

/* --- Accesibilidad: Respetar preferencias de movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
    .scroll_empresa_item.touch-active {
        transition: none;
        animation: none;
    }
    
    .scroll_empresa_item.touch-active::after {
        animation: none;
    }
}

/* ====================================================================
   FIN DE ESTILOS PARA TOQUE INTELIGENTE
   ==================================================================== */