/* ========================================
   HOME PAGES CSS - Consolidado desde templates
   ======================================== */

/* === ESTILOS DE template-home2.php === */

.cntr { 
	text-align: center; 
}

#cursos-online-title { 
	padding-top: 30px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#cursos60 { 
	padding-bottom: 30px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#form1 label {	
	display: block; 
	padding-top: 10px;
	color: white;
}

#form1 input, 
#form1 textarea {	
	width: 100%; 
	max-width: 300px; 
}

#form1div {		
	background-color: #33758f;
	padding: 30px;
	max-width: 360px;
	float: right;   /* #25454D-wistia #33758f-active #3a8aab pasive #3a7ec4-old */
}

#form1div h3 {	
	font-weight: 500;
	color: white;
	font-size: 18px;
	line-height: 22px; 
}

#form1div button {
	width2: 300px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;	 
}

.microbeneficios {
	margin: 0;
	font-weight: 600;
	color: #1f5673;
	font-size: 1.05em;
}

.button {
	text-align: center;
	margin-top: 25px;
	margin-bottom: 25px;
	position: relative;
	width: 100%; 
	max-width: 300px;
	height: 46px;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	background: linear-gradient(180deg, #66d965 0%, #42be42 30%, #279d26 65%, #117f11 100%);
	border-radius: 8px;
	border: 0px solid #154e01;
	border-width: 0px 0px 5px 0px;
	padding: 9px 15px 6px 15px;
	box-shadow: inset 0px 1px 3px rgba(255,255,255,.4);
	color: #fff;
	font-size: initial;
}

.button > i {
	text-align: center;
	color: #fff;
	font-size: 1em;
	background: rgba(0%,0%,0%,0.2);
	border-radius: 100px;
	border: 0px solid transparent;
	border-width: 0px 0px 0px 0px;
	padding: 5px 5px 5px 5px;
	margin: 0px 0px 0px 10px;
	position: static;
	box-shadow: inset 0px 1px 2px rgba(0,0,0,0.4), inset 0px -1px 0px rgba(255,255,255,.5);
}

/* Bootstrap XS breakpoint: Mobile devices */
@media (max-width: 767px) { 
	#form1div { 
		float: left;
		margin-left: -webkit-calc((100% - 360px)/2);
		margin-left: -moz-calc((100% - 360px)/2);
		margin-left: calc((100% - 360px)/2);
	}
}

@media (max-width: 480px) { 
	#form1div { 
		margin-left: 0px;
	}
}

.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%; 
}

#gracias { 	
	display: none; 
	color: white; 
}

.wistia21 {
	padding: 56.25% 0 0 0;
	position: relative; 
	width: 65%; 
	float: left;
}

#form1div0 {
	display: flex;
}

#form1div {	
	width: 35%; 
}

#form1h3 { 
	padding-bottom: 15px; 
}

#label_email { 
	color: white; 
}

#email {
	width: 100%;
}

#form1div2 {
	margin-top: 40%;
}

/* Bootstrap MD breakpoint: Desktop */
@media (max-width: 1199px) { 
	#form1div2 {
		margin-top: 35%;
	}
}

/* Bootstrap SM breakpoint: Tablet */
@media (max-width: 991px) {
	.button {
		min-height: 46px;
		height: auto;
		white-space: normal;
		line-height: 1.3;
	}
	#form1div2 {
		margin-top: 30%;
	}
}

/* Bootstrap XS breakpoint: Mobile */
@media (max-width: 767px) { 
	#form1div2 {
		margin-top: 0;
		max-width: 400px;
		margin: auto;
	}
	#form1div0 {
		display: block;
	}
	.wistia21 {
		float: none; 
		width: 100%;
	}
	#form1div {
		float: none; 
		width: 100%; 
		margin: auto; 
		max-width: 600px;
	}
	#label_email, 
	#brnull { 
		display: none; 
	}
	#form1h3 { 
		margin: 0; 
		padding-bottom: 25px;
	}
	#btnmi2 { 
		margin-top: 25px; 
		margin-bottom: 10px; 
	}
}

/* === CAROUSEL STYLES === */

.carousel-container {
	width: 100%;
	max-width: 100%;
	margin: auto;
	overflow: hidden;
	position: relative;
}

.carousel-slide {
	display: flex;
	width: 100%;
	transition: transform 0.5s ease-in-out;
	flex-direction: row;
}

.carousel-item {
	min-width: 100%;
	transition: ease 0.5s;
}

.carousel-item img {
	width: 100%;
} 

.prev, 
.next {
	position: absolute;
	top: 50%;
	transform: translateY(-100%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	cursor: pointer;
	padding: 10px;
	z-index: 1000;
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.prev.fade-out, 
.next.fade-out {
	opacity: 0;
	pointer-events: none;
}

.prev {
	left: 10px;
}

.next {
	right: 10px;
}

.carousel-indicators {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-100%);
	display: flex;
}

.carousel-indicators div {
	height: 10px;
	width: 10px;
	background-color: #bbb;
	margin: 0 5px;
	border-radius: 50%;
	cursor: pointer;
}

.carousel-indicators .active {
	background-color: #717171;
}

/* === BENEFICIOS PREMIUM 2025 - INSTITUCIÓN EDUCATIVA === */

.todoslosbeneficios {	
	padding: 80px 20px 60px;
	margin: 0 0 10px 0;
	background: linear-gradient(135deg, #f0f4f8 0%, #e8eff5 100%);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 40px;
	position: relative;
	overflow: hidden;
}

/* Textura de fondo sutil con parallax */
.todoslosbeneficios::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background-image: 
		radial-gradient(circle at 20% 50%, rgba(0,144,205,0.04) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(51,117,143,0.04) 0%, transparent 50%);
	pointer-events: none;
	animation: parallaxFloat 20s ease-in-out infinite;
}

@keyframes parallaxFloat {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	33% { transform: translate(2%, -2%) rotate(1deg); }
	66% { transform: translate(-2%, 2%) rotate(-1deg); }
}

/* Tarjetas con glassmorphism premium */
.beneficio {
	max-width: 300px;
	min-height: 220px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-top: 4px solid #0090CD;
	margin-bottom: 0;
	padding: 20px 20px 30px;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	position: relative;
	overflow: hidden;
	box-shadow: 
		0 4px 12px rgba(0,0,0,0.08),
		0 2px 6px rgba(0,0,0,0.04),
		inset 0 1px 0 rgba(255,255,255,0.8);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0;
	transform: translateY(40px) scale(0.95);
	animation: fadeInUpScale 0.7s ease-out forwards;
}

/* Animación de entrada escalonada */
.beneficio:nth-child(1) { animation-delay: 0.1s; }
.beneficio:nth-child(2) { animation-delay: 0.25s; }
.beneficio:nth-child(3) { animation-delay: 0.4s; }
.beneficio:nth-child(4) { animation-delay: 0.55s; }

@keyframes fadeInUpScale {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Brillo premium en hover */
.beneficio::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -100%;
	width: 80%;
	height: 200%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,0.4),
		transparent
	);
	transform: rotate(30deg);
	transition: left 0.7s ease;
}

.beneficio:hover::after {
	left: 150%;
}

/* Hover state premium */
.beneficio:hover {
	transform: translateY(-12px) scale(1.03);
	box-shadow: 
		0 20px 40px rgba(0,0,0,0.15),
		0 8px 16px rgba(0,144,205,0.12),
		inset 0 1px 0 rgba(255,255,255,1);
	border-top-color: #33758f;
	background: rgba(255, 255, 255, 0.98);
}

/* Glow sutil en hover */
.beneficio::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 20px;
	padding: 2px;
	background: linear-gradient(135deg, 
		rgba(0,144,205,0.3) 0%, 
		rgba(51,117,143,0.2) 50%,
		rgba(0,144,205,0.3) 100%);
	-webkit-mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.beneficio:hover::before {
	opacity: 1;
}

/* Iconos con animación premium */
.beneficios_img {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 15px;
}

.beneficios_img img {
	margin: 0;
	float: none;
	animation: iconFloat 4s ease-in-out infinite;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.beneficio:hover .beneficios_img img {
	transform: scale(1.1) rotate(5deg);
	filter: drop-shadow(0 8px 16px rgba(0,144,205,0.2));
}

@keyframes iconFloat {
	0%, 100% { 
		transform: translateY(0) scale(1); 
	}
	50% { 
		transform: translateY(-8px) scale(1.05); 
	}
}

/* Título con gradiente y animación */
.beneficios_titulo {
	margin: 0 0 15px 0;
	padding: 0 10px;
	text-align: center;
	position: relative;
}

.beneficios_titulo h4 {
	margin: 0;
	background: linear-gradient(135deg, #0090CD 0%, #33758f 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 700;
	letter-spacing: 0.3px;
	transition: all 0.3s ease;
}

.beneficio:hover .beneficios_titulo h4 {
	transform: scale(1.05);
	letter-spacing: 0.5px;
}

/* Underline animado */
.beneficios_titulo::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%) scaleX(0);
	width: 60%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #0090CD, transparent);
	transition: transform 0.4s ease;
}

.beneficio:hover .beneficios_titulo::after {
	transform: translateX(-50%) scaleX(1);
}

/* Descripción con fade premium */
.beneficios_descr {
	padding: 0 10px;
	flex-grow: 1;
	display: flex;
	align-items: center;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
	opacity: 0;
	animation: fadeIn 0.6s ease-out 0.4s forwards;
	transition: color 0.3s ease;
}

.beneficio:hover .beneficios_descr {
	color: #333;
}

@keyframes fadeIn {
	to { opacity: 1; }
}

/* Accesibilidad: Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	.beneficio,
	.beneficios_img img,
	.beneficios_descr,
	.todoslosbeneficios::before {
		animation: none !important;
		transition: none !important;
	}
	
	.beneficio {
		opacity: 1;
		transform: none;
	}
	
	.beneficios_descr {
		opacity: 1;
	}
	
	.beneficio:hover {
		transform: none;
	}
}

/* Responsive: Tablet */
@media (max-width: 991px) {
	.todoslosbeneficios {
		padding: 60px 15px 40px;
		gap: 30px;
	}
	
	.beneficio {
		max-width: 280px;
	}
}

/* Responsive: Mobile */
@media (max-width: 767px) {
	.todoslosbeneficios {
		padding: 40px 10px 30px;
		gap: 30px;
	}
	
	.beneficio {
		max-width: 100%;
		margin: 0 15px;
	}
	
	.beneficio:hover {
		transform: translateY(-6px) scale(1.02);
	}
}

@media (max-width: 480px) {
	.beneficios_titulo h4 {
		font-size: 18px;
	}
	
	.beneficios_descr {
		font-size: 13px;
	}
}

/* === ESTILOS DE cursos-online.php === */

.header-spacer {
	margin-top: 150px; /* Desktop */
}

@media (max-width: 850px) {
	.header-spacer {
		margin-top: 0; /* Tablet & Mobile */
	}
}

.partner-logos-list {
	list-style: none; 
	display: grid; 
	grid-auto-flow: initial; 
	grid-template-columns: repeat(3, 3fr); 
	grid-gap: 1.6rem;
}

/* === Cuadro Título === */

.cuadrotitulo {
	color: white !important;
}

/* === ESTILOS DE template-home3-listado.php === */

/* Tipografía estandarizada - Open Sans para todo */
body, h1, h2, h3, h4, p, a, div {
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Quitar bold de h2 */
h2 {
	font-weight: normal;
	text-align: center;
	padding: 40px 15px 20px 15px; /* top right bottom left */
	margin: 0 auto;
	max-width: 1200px;
}

/* Padding específico para títulos de lista */
.rowlistatitulo {
	padding-top: 50px !important;
	padding-bottom: 30px;
}

/* Search box full width */
#search_box {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 auto !important;
}

/* Google Search button visibility */
#search_box .gsc-search-button,
#search_box button,
#search_box input[type="submit"] {
	color: #ffffff !important;
	background-color: #0090CD !important;
	border: none !important;
	padding: 10px 20px !important;
	font-size: 16px !important;
	font-weight: bold !important;
	cursor: pointer !important;
	min-height: 40px !important;
}

#search_box .gsc-search-button:hover,
#search_box button:hover {
	background-color: #33758f !important;
}

/* Google Search input */
#search_box input[type="text"],
#search_box .gsc-input-box input {
	font-size: 16px !important;
	padding: 10px !important;
	height: 40px !important;
	border: 2px solid #0090CD !important;
}

/* Ocultar texto "OPTIMIZADO POR Google" */
#search_box .gsc-branding,
#search_box .gsc-branding-text,
#search_box .gcsc-branding {
	display: none !important;
}

/* Mejorar contenedor de búsqueda */
#search_box .gsc-search-box,
#search_box .gsc-input-box {
	border: none !important;
	background: white !important;
}

/* Asegurar que el botón sea visible con SVG icon */
#search_box .gsc-search-button-v2 {
	padding: 8px 15px !important;
	min-width: 60px !important;
}

#search_box .gsc-search-button-v2 svg {
	width: 18px !important;
	height: 18px !important;
	fill: #ffffff !important;
}

/* Padding utilities */
.pt-10 {
	padding-top: 20px;
}

.pb-20 {
	padding-bottom: 20px;
}

/* Contenedor flexbox para igualar alturas */
.bloquedeexpertos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	justify-content: center;
	align-items: stretch; /* Iguala alturas */
	margin: 0 auto; /* Centrado del contenedor */
	max-width: 100%; /* Evita overflow */
}

.cajaexperto { 			
	flex: 0 0 288px; /* No crece, no se encoge, base 288px */
	max-width: 288px; 
	background-color: var(--color-white);
	border: 2px solid var(--color-gray-300);
	border-radius: var(--radius-lg);
	padding-bottom: var(--space-6);
	display: flex;
	flex-direction: column;
	text-align: left;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: all var(--transition-base);
}

.cajaexperto:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-xl);
	border-color: var(--color-primary-400);
}

@media (max-width: 640px) {
	.cajaexperto { 
		padding-bottom: var(--space-5);
	}
	
	.cajaexperto .cta-detalles {
		width: calc(100% - var(--space-8));
		margin: var(--space-3) var(--space-4);
	}
}

.cajaexperto figure {
	position: relative;
	overflow: hidden;
}

.cajaexperto figure img {
	width: 100%;
	transition: transform var(--transition-slow);
}

/* Overlay gradiente moderno en hover */
.cajaexperto figure::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.3));
	opacity: 0;
	transition: opacity var(--transition-base);
}

.cajaexperto:hover figure::after {
	opacity: 1;
}

.cajaexperto:hover figure img {
	transform: scale(1.05);
}

.cajaexperto h3 {
	text-align: center;
	min-height: 60px; 
	font-size: 1.875rem; /* 30px */
	font-weight: var(--font-weight-bold);
	padding: var(--space-2) var(--space-2) var(--space-1);
	padding-top: 10px;
	line-height: var(--line-height-tight);
	color: var(--color-gray-900);
	margin-bottom: var(--space-1);
}

.cajaexperto p {
	padding: var(--space-1) var(--space-2);
	text-align: center;
	margin-left: var(--space-3);
	margin-right: var(--space-3);
	margin-bottom: var(--space-1);
	font-size: 1.5rem; /* 24px */
	line-height: var(--line-height-relaxed);
	color: var(--color-gray-700);
	flex-grow: 1;
}

.cajaexperto .valores {
	margin: var(--space-2) var(--space-3);
	margin-bottom: var(--space-3);
	padding: var(--space-3);
	background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-md);
	font-size: 1.5rem; /* 24px */
	line-height: var(--line-height-relaxed);
	text-align: left;
}

.cajaexperto .valores > div {
	padding: var(--space-2) 0;
}

.cajaexperto .valores > div:not(:last-child) {
	border-bottom: 1px solid var(--color-gray-100);
}

.cajaexperto .valores strong { 
	color: var(--color-gray-700);
	font-weight: var(--font-weight-semibold);
}

.cajaexperto .valores .precio-ref {
	font-weight: var(--font-weight-bold);
	font-size: 1.875rem; /* 30px */
	color: var(--color-primary-600);
}

/* CTA Detalles */
.cajaexperto .cta-detalles {
	display: block;
	width: fit-content;
	margin: auto auto var(--space-2) auto;
	margin-top: auto;
	font-size: 1.5rem; /* 24px */
	text-transform: uppercase;
	color: white !important;
	text-decoration: none !important;
}

.row2 { 
	text-align: center;
}

.cajaexperto p img { 
	margin-top: -3px; 
}