/* ==========================================================================
   CONECTO — Landing institucional
   CSS organizado por sección. Prefijo "c-" para no chocar con GeneratePress.
   ========================================================================== */

:root {
	--c-navy: #1B4D6C;
	--c-navy-dark: #0F3348;
	--c-teal: #00948D;
	--c-teal-light: #E3F3F1;
	--c-coral: #E8845C;
	--c-bg: #FFFFFF;
	--c-bg-soft: #F4F7F7;
	--c-ink: #1B4D6C;
	--c-ink-soft: #5B6E7A;

	--c-font-display: 'Poppins', system-ui, sans-serif;
	--c-font-body: 'Inter', system-ui, sans-serif;

	--c-radius: 14px;
	--c-radius-lg: 22px;
	--c-container: 1180px;
}

/* ==========================================================================
   FIX FULL-WIDTH — anula el container/padding de GeneratePress alrededor
   de nuestro <main>, para que la landing use el 100% del ancho de pantalla.
   El filtro PHP en functions.php ya ayuda, esto es refuerzo por si la
   versión de GP no lo respeta del todo. Los selectores NO dependen solo de
   "body.home" por si esa clase no está presente en tu instalación de WP.
   ========================================================================== */
.site-content,
.content-area,
#primary,
#main,
.inside-article,
.site-content .container,
.grid-container {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.site-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Ocultar el <h1> de página/entrada que GeneratePress imprime automáticamente
   antes del contenido (el "Conecto" en negro sobre el nav). Nuestra landing
   tiene su propio nav + hero, no lo necesita. Cubrimos todos los selectores
   posibles según versión de GP, sin depender de la clase "home". */
.page-header,
.entry-header,
.entry-title,
h1.entry-title,
.page-title,
.archive-title,
#conecto-landing ~ .page-header {
	display: none !important;
}

/* Overflow-x hidden: el blob del hero y otros elementos decorativos se
   salen del viewport a propósito (efecto visual), pero eso genera scroll
   horizontal fantasma con margen blanco a la derecha. Lo bloqueamos a
   nivel global del documento. */
html,
body {
	overflow-x: hidden !important;
	max-width: 100vw;
}

/* ==========================================================================
   RESET / BASE — acotado a nuestro contenedor para no pisar el resto de WP
   ========================================================================== */
#conecto-landing,
#conecto-landing * {
	box-sizing: border-box;
}

/* MODO STANDBY: sitio centrado con margen a los costados, en vez de
   full-width. Esto evita depender de que los fondos decorativos (blobs)
   cubran perfectamente pantallas muy anchas, mientras se termina de pulir
   el diseño full-width. Para volver a full-width más adelante, alcanza
   con borrar este bloque completo. */
body {
	background: #E9ECEC; /* color de "margen" detrás del sitio centrado */
}

#conecto-landing {
	max-width: 1400px;
	margin: 0 auto;
	box-shadow: 0 0 60px rgba(15, 51, 72, 0.12);
}

#conecto-landing {
	font-family: var(--c-font-body);
	color: var(--c-ink);
	background: var(--c-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* evita scroll horizontal por los blobs/parallax */
}

#conecto-landing h1,
#conecto-landing h2,
#conecto-landing h3 {
	font-family: var(--c-font-display);
	margin: 0;
	color: var(--c-navy);
}

#conecto-landing p {
	margin: 0;
}

#conecto-landing a {
	text-decoration: none;
}

#conecto-landing ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#conecto-landing img {
	max-width: 100%;
	display: block;
}

/* Foco visible para accesibilidad de teclado */
#conecto-landing a:focus-visible,
#conecto-landing button:focus-visible {
	outline: 3px solid var(--c-coral);
	outline-offset: 3px;
}

/* Respetar reduced-motion */
@media (prefers-reduced-motion: reduce) {
	#conecto-landing * {
		transition: none !important;
		animation: none !important;
	}
}

.c-accent {
	color: var(--c-coral);
}

.c-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--c-navy-dark);
	background: var(--c-teal-light);
	padding: 4px 11px;
	border-radius: 5px;
	margin-bottom: 13px;
}

.c-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.c-eyebrow--light {
	color: var(--c-teal);
	background: var(--c-teal-light);
	padding: 7px 16px;
	border-radius: 30px;
}

.c-eyebrow__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-teal);
}

.c-eyebrow--coral {
	color: var(--c-coral);
}

/* Botones */
.c-btn {
	display: inline-block;
	background: var(--c-navy);
	color: #fff;
	padding: 16px 32px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	font-family: var(--c-font-body);
	box-shadow: 0 10px 24px rgba(27, 77, 108, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.c-btn:hover,
.c-btn:focus-visible {
	transform: translateY(-2px);
	color: #fff;
}

.c-btn--coral {
	background: var(--c-coral);
	box-shadow: 0 10px 24px rgba(232, 132, 92, 0.35);
}

.c-link-arrow {
	color: var(--c-navy);
	font-weight: 700;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.c-link-arrow span {
	transition: transform 0.15s ease;
}

.c-link-arrow:hover span {
	transform: translateX(4px);
}

/* ==========================================================================
   NAV
   ========================================================================== */
.c-nav {
	position: relative;
	z-index: 50;
	background: var(--c-bg-soft);
}

.c-nav__inner {
	max-width: var(--c-container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 6vw;
	gap: 20px;
}

.c-nav__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--c-font-display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0.5px;
	color: var(--c-navy);
	flex-shrink: 0;
}

.c-nav__mark {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: conic-gradient(from 200deg, var(--c-teal), var(--c-navy), var(--c-teal));
	flex-shrink: 0;
}

.c-nav__links {
	display: flex;
	gap: 30px;
	font-size: 14px;
	color: var(--c-ink-soft);
	font-weight: 600;
}

.c-nav__links a {
	color: var(--c-ink-soft);
	transition: color 0.15s ease;
}

.c-nav__links a:hover {
	color: var(--c-teal);
}

.c-nav__cta {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--c-coral);
	padding: 11px 24px;
	border-radius: 30px;
	box-shadow: 0 6px 16px rgba(232, 132, 92, 0.35);
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.c-nav__cta:hover {
	color: #fff;
	transform: translateY(-2px);
}

.c-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.c-nav__burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--c-navy);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.c-nav__burger.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.c-nav__burger.is-open span:nth-child(2) {
	opacity: 0;
}

.c-nav__burger.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.c-nav__mobile {
	display: none;
	flex-direction: column;
	background: var(--c-bg-soft);
	border-top: 1px solid rgba(27, 77, 108, 0.1);
	padding: 10px 6vw 20px;
}

.c-nav__mobile.is-open {
	display: flex;
}

.c-nav__mobile a {
	padding: 12px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-navy);
	border-bottom: 1px solid rgba(27, 77, 108, 0.08);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.c-hero {
	position: relative;
	overflow: hidden;
	background: var(--c-bg-soft);
	padding-bottom: 40px;
}

/* Capa de fondo que cubre TODO el ancho de la sección con el mismo
   degradé teal/navy del blob decorativo. Así, en pantallas anchas donde
   el círculo de 620px no alcanza a cubrir todo el lado derecho, siempre
   queda el degradé de fondo detrás — nunca se ve el gris/blanco de
   --c-bg-soft asomando a los costados. El blob circular queda encima,
   como capa decorativa adicional. */
.c-hero__blob {
	position: absolute;
	top: -180px;
	right: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, var(--c-teal) 0%, var(--c-navy) 75%);
	opacity: 0.95;
	z-index: 1;
}

.c-hero__blob2 {
	position: absolute;
	top: 90px;
	right: 460px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--c-coral);
	opacity: 0.8;
	filter: blur(0.5px);
	z-index: 1;
}

.c-hero__dots {
	position: absolute;
	bottom: 40px;
	left: 40px;
	width: 140px;
	height: 140px;
	background-image: radial-gradient(var(--c-teal) 2.5px, transparent 2.5px);
	background-size: 18px 18px;
	opacity: 0.35;
	z-index: 1;
}

.c-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--c-container);
	margin: 0 auto;
	padding: 70px 6vw 30px;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 40px;
	align-items: center;
}

.c-hero__title {
	font-size: 50px;
	font-weight: 800;
	line-height: 1.15;
}

.c-hero__sub {
	font-size: 17px;
	color: var(--c-ink-soft);
	max-width: 480px;
	line-height: 1.7;
	margin-top: 24px;
}

.c-hero__cta-row {
	margin-top: 34px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.c-hero__card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 30px 60px -20px rgba(15, 51, 72, 0.35);
	padding: 36px 30px;
	position: relative;
}

.c-hero__card::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--c-teal), var(--c-coral));
	z-index: -1;
	opacity: 0.5;
}

.c-hero__price {
	font-family: var(--c-font-display);
	font-size: 56px;
	font-weight: 800;
	color: var(--c-navy);
	line-height: 1;
}

.c-hero__price span {
	color: var(--c-teal);
	font-size: 22px;
}

.c-hero__price-lbl {
	font-size: 13.5px;
	color: var(--c-ink-soft);
	margin-top: 8px;
	font-weight: 600;
}

.c-hero__card hr {
	border: none;
	border-top: 1px solid #eee;
	margin: 22px 0;
}

.c-hero__mini-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.c-hero__mini-num {
	font-weight: 800;
	color: var(--c-navy);
	font-size: 22px;
	font-family: var(--c-font-display);
}

.c-hero__mini-lbl {
	color: var(--c-ink-soft);
	margin-top: 2px;
	font-size: 12px;
}

.c-wave {
	display: block;
	width: 100%;
	height: 50px;
	margin-top: -2px;
}

/* ==========================================================================
   PROBLEMA
   ========================================================================== */
.c-problem {
	background: var(--c-navy);
	color: #fff;
	padding: 90px 6vw;
	position: relative;
	overflow: hidden;
}

.c-problem__blob {
	position: absolute;
	bottom: -140px;
	left: -100px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: var(--c-teal);
	opacity: 0.25;
}

.c-problem__inner {
	max-width: var(--c-container);
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.c-problem__title {
	font-size: 32px;
	font-weight: 800;
	color: #fff;
	max-width: 650px;
	margin-bottom: 44px;
	line-height: 1.3;
}

.c-problem__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.c-problem__card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--c-radius);
	padding: 30px 24px;
	backdrop-filter: blur(6px);
}

.c-problem__num {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--c-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	margin-bottom: 18px;
	font-family: var(--c-font-display);
}

.c-problem__card p {
	font-size: 15.5px;
	line-height: 1.55;
	opacity: 0.92;
}

.c-problem__highlight {
	margin-top: 30px;
	background: linear-gradient(120deg, var(--c-teal), #0bb0a8);
	border-radius: var(--c-radius);
	padding: 28px 32px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

/* ==========================================================================
   METODOLOGÍA
   ========================================================================== */
.c-method {
	padding: 100px 6vw;
	background: var(--c-bg-soft);
}

.c-method__inner {
	max-width: var(--c-container);
	margin: 0 auto;
}

.c-method__topline {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 56px;
	flex-wrap: wrap;
	gap: 20px;
}

.c-method__topline h2 {
	font-size: 32px;
	font-weight: 800;
	max-width: 500px;
	line-height: 1.3;
}

.c-method__topline p {
	color: var(--c-ink-soft);
	max-width: 320px;
	font-size: 14.5px;
	line-height: 1.6;
}

.c-method__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.c-method__card {
	background: #fff;
	border-radius: 16px;
	padding: 28px 22px;
	box-shadow: 0 12px 30px -12px rgba(27, 77, 108, 0.18);
	border-top: 4px solid var(--c-teal);
}

.c-method__card--navy {
	border-top-color: var(--c-navy);
}

.c-method__card--coral {
	border-top-color: var(--c-coral);
}

.c-method__step-no {
	font-family: var(--c-font-display);
	font-size: 34px;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--c-teal);
	margin-bottom: 10px;
	display: block;
}

.c-method__card--navy .c-method__step-no {
	-webkit-text-stroke-color: var(--c-navy);
}

.c-method__card--coral .c-method__step-no {
	-webkit-text-stroke-color: var(--c-coral);
}

.c-method__card h3 {
	font-size: 16.5px;
	font-weight: 800;
	margin-bottom: 10px;
	line-height: 1.3;
}

.c-method__card p {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--c-ink-soft);
}

/* ==========================================================================
   MODELO DE NEGOCIO
   ========================================================================== */
.c-model {
	padding: 100px 6vw;
	background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-dark) 60%, var(--c-teal) 140%);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.c-model__shape {
	position: absolute;
	top: -100px;
	left: 60%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	border: 60px solid rgba(255, 255, 255, 0.05);
}

.c-model__inner {
	max-width: 1040px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

#conecto-landing .c-model__inner h2 {
	font-size: 36px;
	font-weight: 800;
	color: #fff;
	max-width: 720px;
	margin: 0 auto;
	line-height: 1.3;
}

.c-model__price-wrap {
	margin-top: 44px;
}

.c-model__price {
	font-family: var(--c-font-display);
	font-size: 84px;
	font-weight: 700;
	color: var(--c-coral);
	line-height: 1;
}

.c-model__price-lbl {
	font-size: 14px;
	opacity: 0.75;
	margin-top: 12px;
	letter-spacing: 0.5px;
}

.c-model__grid {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	text-align: left;
}

.c-model__point {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--c-radius);
	padding: 26px 24px;
}

.c-model__point p {
	font-size: 14.5px;
	line-height: 1.6;
	opacity: 0.92;
	color: #fff;
}

.c-model__cta {
	margin-top: 46px;
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.c-contact {
	padding: 90px 6vw 0;
	background: #fff;
}

.c-contact__box {
	max-width: var(--c-container);
	margin: 0 auto;
	background: var(--c-teal-light);
	border-radius: var(--c-radius-lg);
	padding: 60px 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
}

.c-contact__box::after {
	content: "";
	position: absolute;
	bottom: -60px;
	right: -60px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: var(--c-coral);
	opacity: 0.15;
}

.c-contact__left {
	position: relative;
	z-index: 2;
}

.c-contact__left h2 {
	font-size: 30px;
	font-weight: 800;
	max-width: 380px;
	line-height: 1.3;
}

.c-contact__left p {
	color: var(--c-ink-soft);
	margin-top: 12px;
	max-width: 360px;
	font-size: 14.5px;
	display: block;
}

.c-contact__right {
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	z-index: 2;
}

.c-contact__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-navy);
	transition: transform 0.15s ease;
}

.c-contact__item:hover {
	transform: translateX(4px);
	color: var(--c-navy);
}

.c-contact__ic {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	color: var(--c-teal);
}

.c-footer-bottom {
	max-width: var(--c-container);
	margin: 40px auto 0;
	padding: 24px 6vw 40px;
	font-size: 13px;
	color: var(--c-ink-soft);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
	.c-hero__inner {
		grid-template-columns: 1fr;
	}

	.c-problem__grid {
		grid-template-columns: 1fr;
	}

	.c-method__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.c-model__grid {
		grid-template-columns: 1fr;
	}

	.c-nav__links,
	.c-nav__cta {
		display: none;
	}

	.c-nav__burger {
		display: flex;
	}

	.c-hero__title {
		font-size: 36px;
	}

	.c-contact__box {
		flex-direction: column;
		text-align: center;
		padding: 44px 30px;
	}

	.c-contact__right {
		align-items: center;
	}

	.c-contact__left p {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 600px) {
	.c-hero__blob {
		width: 420px;
		height: 420px;
		top: -140px;
		right: -180px;
	}

	.c-hero__blob2 {
		display: none;
	}

	.c-hero__title {
		font-size: 30px;
	}

	.c-problem__title,
	.c-method__topline h2 {
		font-size: 26px;
	}

	.c-model__inner h2 {
		font-size: 26px;
	}

	.c-model__price {
		font-size: 60px;
	}

	.c-method__grid {
		grid-template-columns: 1fr;
	}

	.c-footer-bottom {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   ANIMACIONES — reveal al hacer scroll + parallax + nav dinámico
   ========================================================================== */

/* Nav: fondo sólido con blur al scrollear, para que no quede "pegado" y
   transparente sobre el contenido que pasa por detrás. */
.c-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(244, 247, 247, 0.75);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: box-shadow 0.3s ease, background 0.3s ease;
}

.c-nav.is-scrolled {
	background: rgba(244, 247, 247, 0.95);
	box-shadow: 0 8px 24px rgba(15, 51, 72, 0.08);
}

/* Reveal genérico: estado inicial oculto + desplazado, según dirección */
[data-reveal] {
	opacity: 0;
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}

[data-reveal="up"] {
	transform: translateY(36px);
}

[data-reveal="left"] {
	transform: translateX(-40px);
}

[data-reveal="right"] {
	transform: translateX(40px);
}

[data-reveal="scale"] {
	transform: scale(0.85);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

/* Elementos con parallax: transición suave para que el movimiento
   por scroll no se sienta brusco/entrecortado */
[data-parallax] {
	will-change: transform;
}

/* ---------- Indicador de scroll ("la ruedita") en el hero ---------- */
.c-scroll-cue {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 3;
	color: var(--c-ink-soft);
	transition: opacity 0.3s ease;
}

.c-scroll-cue__mouse {
	width: 26px;
	height: 42px;
	border: 2px solid var(--c-teal);
	border-radius: 14px;
	display: flex;
	justify-content: center;
	padding-top: 8px;
}

.c-scroll-cue__wheel {
	width: 4px;
	height: 8px;
	border-radius: 2px;
	background: var(--c-teal);
	animation: c-scroll-wheel 1.6s ease-in-out infinite;
}

.c-scroll-cue__text {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

@keyframes c-scroll-wheel {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	60% {
		transform: translateY(12px);
		opacity: 0.3;
	}
	61% {
		transform: translateY(0);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-scroll-cue__wheel {
		animation: none;
	}
}

@media (max-width: 600px) {
	.c-scroll-cue {
		display: none; /* en mobile ocupa espacio valioso, se omite */
	}
}