/* ===== RESET ===== */

@font-face {
    font-family: 'Montserrat-Bold';
    src: url(./assets/fonts/Montserrat/static/Montserrat-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url(./assets/fonts/Montserrat/static/Montserrat-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url(./assets/fonts/Montserrat/static/Montserrat-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Jakarta-SemiBold';
    src: url(./assets/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Jakarta-Regular';
    src: url(./assets/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Regular.ttf) format('truetype');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Montserrat', sans-serif;
	background: #fff;
	color: #333;
	overflow-x: hidden;
}

/* ---- Container ---- */
.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ===== HERO ===== */
.hero,
.hero-rest {
	background: #fff;
	margin-top: 0rem;
	padding: 0 40px;
	/* deja espacio si el header es fixed */
	font-family: 'Montserrat', sans-serif;
	margin: 0 auto;
	height: auto;
	margin-top: 30px;
	margin-bottom: 280px;
}

.hero-rest {
	max-width: 1240px;
	margin-bottom: 100px;
	padding: 0 30px;
}

/* Encabezado del hero (título + texto) */
.hero-header {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: start;
	gap: 3rem;
	margin-bottom: 60px;
	background-color: #ffffffee;
	margin-top: -30px;
}

.header-container {
	display: flex;
	background-color: transparent;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	margin: 0 auto;
}

.hero-subtitle,
.hero-subtitle mark span {
	font-family: 'Jakarta-SemiBold', sans-serif;
	font-size: 24px !important;
	color: #0b1b35;
}

.hero-subtitle mark {
	background: #FCD92A;
	padding: 5px 10px;
	border-radius: 20px;
}

.hero-left {
	height: 100%;
}

.hero-left h1 {
	font-family: 'Montserrat-Medium', sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	color: #0b1b35;
}

.hero-left p {
	font-family: 'Jakarta-Regular', sans-serif;
	font-size: 16px;
	margin-top: 10px;
}

.video-container video {
	width: 100%;
	height: auto;
	aspect-ratio: 1.24/1 !important;
	border-radius: 60px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.hero-right {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: auto;
}

.hero-right p {
	color: #333;
	font-size: 18px;
	line-height: 1.7;
	max-width: 420px;
	line-height: 1.3;
}

@media (max-width: 1050px) {
	.hero-subtitle,
	.hero-subtitle mark span {
		font-size: 20px !important;
	}

	.hero-left h1 {
		font-size: 36px;
	}
}

@media (max-width: 900px) {
	.hero-header {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 2rem;
		margin-bottom: 0;
	}

	.hero-left h1 {
		font-size: 40px;
	}

	.hero-right {
		margin-top: 0;
	}

	.video-container video {
		width: 90%;
	}
}

@media (max-width: 600px) {
	.hero-subtitle,
	.hero-subtitle mark span {
		font-size: 18px !important;
		max-width: 280px;
		margin: 0 auto;
		line-height: 1.2;
		margin-bottom: 10px;
	}

	.hero-subtitle mark {
		padding: 0px 5px;
	}
}

/* Tarjetas */
.hero-cards {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-top: 2.5rem;
}

.hero-card {
	position: relative;
	display: flex;
	height: 450px !important;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: transform .3s ease, box-shadow .3s ease;
	isolation: isolate;
	/* crea nuevo contexto de apilado */
}

/* La imagen nunca debe “tapar” el botón */
.hero-card img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* Botón dentro de la imagen */
.hero-btn {
	position: absolute;
	bottom: 1.2rem;
	left: 10%;
	transform: translate(-50%, 0);
	z-index: 2;
	width: 300px;
	height: 55px;
	background: #fff;
	color: #0b1b35;
	font-weight: 600;
	font-size: 1rem;
	border: none;
	border-radius: 30px;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-btn1,
.hero-btn1:focus-visible {
	background: #53146e;
	color: #fff;
	transform: translate(-50%, -2px);
}

.hero-btn2,
.hero-btn2:focus-visible {
	background: #e4582e;
	color: #fff;
	transform: translate(-50%, -2px);
}

.hero-btn3,
.hero-btn3:focus-visible {
	background: #22cc5e;
	color: #fff;
	transform: translate(-50%, -2px);
}

/* Tarjeta con flip 3D */
.hero-card {
	width: 500px;
	height: 600px;
	border-radius: 20px;
	overflow: hidden;
	perspective: 1000px;
	position: relative;
	overflow: visible;
}

.card-3d {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.card-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
}

.card-front img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	pointer-events: none;
	position: relative;
	z-index: 1;
	border-radius: 20px 20px 20px 20px;
}

/* Cara trasera de la tarjeta */
.card-back {
	position: relative;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotateY(180deg);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1rem;
	padding: 25px 20px;
	background: #fff;
	z-index: 1;
	backface-visibility: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
}

.card-hover-flip:hover .card-3d {
	transform: rotateY(180deg);
}

.card-back h3 {
	font-family: 'Montserrat-SemiBold', sans-serif;
	font-size: 20px;
	color: #0b1b35;
	margin-bottom: 0.5rem;
}

.bullets {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bullets li {
	display: flex;
	gap: 10px;
	font-family: 'Jakarta-Regular', sans-serif;
	font-size: 16px;
	margin-bottom: 10px;
	line-height: 1.1;
}

.bullets li::before {
	content: "";
	flex: 0 0 .55rem;
	height: .55rem;
	margin-top: .55rem;
	border-radius: 50%;
}

.hero-cards .hero-card:nth-child(1) .bullets li::before,
.hero-cards .hero-card:nth-child(2) .bullets li::before,
.hero-cards .hero-card:nth-child(3) .bullets li::before {
	font-size: 18px;
	background: none;
	position: relative;
	top: -14px;
}

.hero-cards .hero-card:nth-child(1) .bullets li::before {
	content: "∙";
	color: #6E3EA4;
}

.hero-cards .hero-card:nth-child(2) .bullets li::before {
	content: "◆";
	color: #E4572E;
}

.hero-cards .hero-card:nth-child(3) .bullets li::before {
	content: "►";
	color: #22CC5E;
}

.hero-cards .hero-card:nth-child(1) .bullets li::before {
	font-size: 30px;
	top: -16px;
}

.bullets-purple li::before {
	background: #6E3EA4;
}

.bullets-orange li::before {
	background: #E4572E;
}

.bullets-green li::before {
	background: #22CC5E;
}

.watermark {
	position: absolute !important;
	right: 10px;
	bottom: 10px;
	width: 130px !important;
	height: auto !important;
	opacity: 0.4;
	margin: 0;
}

/* --- Safari 3D flip fixes --- */
.hero-card {
  -webkit-perspective: 1000px; /* prefijo para Safari */
  perspective: 1000px;
}

.card-3d {
  -webkit-transform-style: preserve-3d; /* prefijo Safari */
  transform-style: preserve-3d;
  will-change: transform; /* performance hint */
}

.card-face,
.card-front,
.card-back,
.card-front * {
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  transform: translateZ(0); /* fuerza capa propia y evita bleed */
}

/* Botón del frente: asegúrate que no “traspase” al girar */
.hero-btn {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* La imagen del frente también */
.card-front img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Asegura las rotaciones correctas (ya las tienes, lo dejamos explícito) */
.card-front { transform: rotateY(0deg); }
.card-back  { transform: rotateY(180deg); }

/* Responsivo básico */
@media (max-width: 1050px) {
	.hero-card {
		height: 380px !important;
	}

	.bullets li {
		font-size: 14px;
	}

	.watermark {
		opacity: 0.2;
	}

	.hero-btn {
		width: 240px;
		height: 45px;
		font-size: 0.9rem;
	}
}

@media (max-width: 900px) {
	.hero-card {
		width: 210px;
		height: 280px !important;
	}

	.bullets li {
		font-size: 12px;
	}

	.hero-btn {
		width: 180px;
		height: 35px;
		font-size: 0.9rem;
		position: absolute;
		bottom: 10px;
	}

	.watermark {
		opacity: 0.1;
	}
}

@media (max-width: 730px) {
	.hero-cards {
		flex-direction: column;
		align-items: center;
	}

	.hero-card {
		width: 280px;
		height: 380px !important;
	}

	.hero-btn {
		width: 220px;
		height: 40px;
		font-size: 0.9rem;
		position: absolute;
		bottom: 10px;
	}

	.contacto-dudas h2 {
		font-size: 32px;
	}
}

/* ===== SECCIÓN DE TESTIMONIOS ===== */
.testimonios {
	background: #f9fafb;
	padding: 4rem 5%;
	text-align: center;
}

.testimonios h2 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 2rem;
	color: #0b1b2b;
}

.test-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

.test-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	padding: 2rem;
	text-align: left;
}

.test-card p {
	margin-bottom: 1rem;
	color: #333;
}

.test-card h4 {
	font-weight: 700;
	margin-top: 1rem;
}

.cta-banner {
	background: #ffdf00;
	padding: 70px 0;
	font-family: 'Montserrat-SemiBold', sans-serif;
	font-size: 40px;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.cta-banner:hover {
	background: #0b1b2b;
	transition: background 0.2s;
}

.cta-banner:hover .marquee-content span {
	color: #ffdf00;
	transition: color 0.2s;
}

.cta-banner:active .marquee-content span {
	text-decoration: underline;
}

/* ===== SECCIÓN FINAL ===== */
.final-section {
	background: #fff;
	text-align: center;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 90px;
}

.final-section img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.final-img img {
	width: 100%;
	display: block;
}

/* ===== FOOTER ===== */
.footer {
	background: #072d40;
	color: #fff;
	padding: 2rem 5%;
}

.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.footer-address h4 {
	margin-bottom: .5rem;
	font-size: 1rem;
	font-weight: 600;
}


.footer-email a {
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	text-decoration: underline;
}

.footer hr {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	margin: 1rem 0;
}

.footer-bottom {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
}

.footer-logo img {
	max-width: 220px;
}

.footer-contact h5,
.footer-advisor h5 {
	margin-bottom: .5rem;
	font-size: .95rem;
	font-weight: 600;
}

.footer-contact p,
.footer-advisor p {
	margin: .2rem 0;
	font-size: .9rem;
}

.footer-social {
	display: flex;
	gap: 1rem;
	font-size: 1.2rem;
}

.footer-social a {
	color: #18c35a;
	text-decoration: none;
	transition: color .3s;
}

.footer-social a:hover {
	color: #fff;
}

/* ===== CTA ANIMADA ===== */
.cta-banner {
	background: #ffdf00;
	overflow: hidden;
	position: relative;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.marquee-content {
	display: inline-flex;
	white-space: nowrap;
	animation: marquee 20s linear infinite;
}

.marquee-content span {
	display: inline-block;
	/* espacio entre repeticiones */
	font-family: 'Montserrat-SemiBold', sans-serif;
	font-size: 70px;
	color: #0b1b2b;
}

/* Animación fluida continua */
@keyframes marquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.cta-button {
	text-align: center;
	margin-top: 80px;
	margin-bottom: 80px;
}

.cta-button button {
	width: 200px;
	height: 60px;
	font-family: 'Jakarta-SemiBold', sans-serif;
	font-size: 18px;
	background: #0E2435;
	color: #fff;
	border: 1px solid #0E2435;
	border-radius: 28px;
	cursor: pointer;
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
	transition: background 0.2s, color 0.2s;
}

.cta-button button:hover {
	background: white;
	color: #0E2435;
	transition: background 0.2s, color 0.2s;
}

/* === Sticky footer layout === */
html,
body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* El contenido principal crece para empujar el footer */
main {
	flex: 1;
}

/* ===== CARRUSEL DE TESTIMONIOS ===== */
.carousel-testimonios {
	position: relative;
	width: 100vw;
	height: 90dvh !important;
	max-height: 900px;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
	height: 900px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #00000011;
	border-radius: 60px 60px 0 0;
	padding-top: 70px;
	padding-bottom: 180px;
}

/* Pista del carrusel */
.carousel-track {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100%;
	width: 100%;
	margin-top: 100px;
}

/* Tarjeta */
.carousel-item {
	position: absolute;
	width: 85%;
	max-width: 1180px;
	height: 100%;
	max-height: 600px;
	opacity: 0;
	transform: scale(0.8);
	filter: blur(6px);
	transition: all 1s ease-in-out;
	border-radius: 70px;
	background: #fff;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	cursor: pointer;
}

/* Contenido interno */
.carousel-content {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	height: 100%;
	align-items: stretch;
	overflow: hidden;
}

/* Contenedor de imagen */
.carousel-img-wrapper {
	border-radius: 0 35px 35px 0;
	overflow: hidden;
}

/* Imagen dentro del contenedor */
.carousel-img {
	width: 100%;
	height: 100%;
	display: flex;
}

.carousel-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Estados de las tarjetas */
.carousel-item.active {
	opacity: 1;
	transform: scale(1);
	filter: blur(0);
	z-index: 3;
}

.carousel-item.prev {
	opacity: 0.6;
	transform: scale(0.85) translateX(-60%);
	z-index: 2;
}

.carousel-item.next {
	opacity: 0.6;
	transform: scale(0.85) translateX(60%);
	z-index: 2;
}

.carousel-item.hidden {
	opacity: 0;
	transform: scale(0.7);
	z-index: 1;
}

/* Texto dentro de la tarjeta */
.carousel-text {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2.5rem 2.5rem;
	max-width: 560px;
}

/* Parte superior (comillas + párrafo) */
.text-top {
	margin: 0;
	transform: translateY(-12px);
	display: grid;
	gap: .75rem;
}

.quote-icon {
	font-weight: 600;
	font-size: 130px;
	line-height: 1;
	color: #0b1b2b;
	padding-bottom: 0;
}

.text-top p {
	font-weight: 600;
	font-size: 26px;
	line-height: 45px;
	color: #000;
}

/* Ajuste alterno de comillas y párrafo (compacto) */
.text-top {
	display: grid;
	row-gap: 0;
	transform: none;
	margin: 0;
}

.quote-icon {
	font-weight: 600;
	font-size: 82px;
	line-height: .7;
	color: #0b1b2b;
	display: block;
	margin-bottom: -8px;
	padding-bottom: 0;
}

.text-top p {
	margin: 0;
	font-weight: 600;
	font-size: 26px;
	line-height: 45px;
	color: #000;
}

/* Parte inferior (estrellas, nombre, rol) */
.text-bottom {
	margin-top: auto;
}

.text-bottom .stars {
	color: #FCD92A;
	font-size: 24px;
	margin: .8rem 0 .6rem;
}

.text-bottom h4 {
	font-weight: 500;
	font-size: 20px;
	line-height: 115%;
	color: #0b1b2b;
	margin: 0 0 .15rem;
}

.text-bottom .role {
	font-weight: 300;
	font-size: 15px;
	line-height: 115%;
	color: #777;
	margin: 0;
}

/* Responsivo */
@media (max-width: 900px) {
	.carousel-testimonios {
		border-radius: 30px 30px 0 0;
	}

	.carousel-content {
		grid-template-columns: 1fr;
	}

	.carousel-item {
		width: 90%;
		height: 550px;
		border-radius: 30px;
	}

	.quote-icon {
		height: 30px;
		font-size: 55px;
	}

	.carousel-text {
		max-width: 100%;
		padding: 20px;
		padding-bottom: 10px;
	}

	.text-top > p {
		line-height: 1.2;
		font-size: 25px;
	}

	.text-bottom .stars {
		margin-top: 0 !important;
		font-size: 20px;
	}

	.carousel-img-wrapper {
		border-radius: 0 0 20px 20px;
	}
}

/* ===== SECCIÓN DE CONFIANZA ===== */
.trust-section {
	width: 100%;
	text-align: center;
	margin-bottom: 30px;
	background: #fff;
	padding: 0 30px;
}

.trust-section h2 {
	font-family: 'Montserrat-Medium', sans-serif;
	font-weight: 600;
	font-size: 46px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #0b1b2b;
	margin: 0 auto;
	text-align: center;
}

@media (max-width: 768px) {
	.trust-section h2 {
		font-size: 32px;
	}
}

.fondo {
	background: #1e6ebe;
}

/* ===== SECCIÓN DE CONTACTO SIMPLE ===== */
.contacto-dudas {
	background: #ffffff;
	text-align: center;
	padding-bottom: 110px;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Título principal */
.contacto-dudas h2 {
	font-family: 'Montserrat-SemiBold', sans-serif;
	font-size: 46px;
	margin-bottom: 40px;
	line-height: 1.2;
}

/* Botón / texto inferior */
.btn-contacto {
	display: inline-block;
	font-family: 'Jakarta-SemiBold', sans-serif;
	font-size: 20px;
	background: #A8E0FF;
	color: #062638;
	text-decoration: none;
	padding: 15px 30px;
	border-radius: 25px;
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
	margin: 0 20px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.btn-contacto:hover {
	background-color: #082638;
	color: white;
	transition: background-color 0.2s, color 0.2s;
}

@media (max-width: 730px) {
	.contacto-dudas h2 {
		font-size: 32px;
		margin-bottom: 20px;
	}

	.btn-contacto {
		font-size: 18px;
		padding: 12px 25px;
		margin: 0 10px;
	}
}



/* Redes sociales - PNG a 50px */
.footer-social {
	display: flex;
	gap: 42px;
}

.footer-social .social {
	/* área de clic un poco mayor que el icono */
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	transition: background .2s, transform .2s;
}

.footer-social .social:hover {
	background: rgba(255, 255, 255, .1);
	transform: translateY(-2px);
}

/* 👉 tamaño del icono */
.footer-social .social img {
	width: 50px;
	height: 50px;
	display: block;
}