/*
 * PepNet Widgets — base común.
 * Todo cuelga de .pn (raíz de cada widget) o de clases con prefijo pn-/pepnet-.
 * Los colores y fuentes leen los globales del Kit de Elementor; si no existen, usan los del diseño.
 */

.pn,
.pepnet-tarjeta,
.pepnet-form,
.pn-modal-root {
	--pn-teal: var(--e-global-color-primary, #0e585b);
	--pn-ink: var(--e-global-color-secondary, #0b0b0c);
	--pn-slate: var(--e-global-color-text, #3d4244);
	--pn-cyan: var(--e-global-color-accent, #3ec2ce);
	--pn-paper: var(--e-global-color-pnpapel, #f5f6f6);
	--pn-mist-2: var(--e-global-color-pnniebla, #dbe1e0);
	--pn-mist: var(--e-global-color-pnnieblaclara, #e9ecec);
	--pn-white: var(--e-global-color-pnblanco, #ffffff);
	--pn-deep: var(--e-global-color-pnprofundo, #0a1b1c);
	--pn-cyan-10: color-mix(in srgb, var(--pn-cyan) 12%, transparent);
	--pn-cyan-25: color-mix(in srgb, var(--pn-cyan) 25%, transparent);
	--pn-teal-08: color-mix(in srgb, var(--pn-teal) 7%, transparent);
	--pn-display: var(--e-global-typography-primary-font-family, "PepNet Quicksand"), "PepNet Quicksand", "Quicksand", sans-serif;
	--pn-body: var(--e-global-typography-text-font-family, "PepNet Manrope"), "PepNet Manrope", "Manrope", sans-serif;
	--pn-radius: 20px;
	--pn-radius-sm: 12px;
	--pn-header-h: var(--pn-header-height, 78px);
}

.pn {
	position: relative;
	font-family: var(--pn-body);
	color: var(--pn-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: left;
}

.pn,
.pn *,
.pn *::before,
.pn *::after {
	box-sizing: border-box;
}

.pn img {
	max-width: 100%;
	display: block;
	border: 0;
	box-shadow: none;
}

.pn a,
.pn a:visited {
	color: inherit;
	text-decoration: none;
}

.pn a:focus-visible,
.pn button:focus-visible,
.pn summary:focus-visible,
.pn input:focus-visible {
	outline: 2px solid var(--pn-cyan);
	outline-offset: 2px;
}

.pn ul,
.pn ol {
	margin: 0;
	padding: 0;
}

.pn ul {
	list-style: none;
}

.pn h1,
.pn h2,
.pn h3,
.pn h4,
.pn h5,
.pn h6 {
	font-family: var(--pn-display);
	font-weight: 800;
	margin: 0;
	padding: 0;
	letter-spacing: -.01em;
	line-height: 1.12;
	color: inherit;
	text-transform: none;
}

.pn p {
	margin: 0;
}

.pn em {
	font-style: normal;
	color: var(--pn-teal);
}

.pn button {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.pn [id] {
	scroll-margin-top: var(--pn-header-h);
}

/* Contenedor y sección */
.pn-wrap {
	width: 90%;
	max-width: 1680px;
	margin: 0 auto;
	padding: 0;
}

.pn-section {
	padding-top: 104px;
	padding-bottom: 104px;
}

/* Etiqueta superior */
.pn .pn-eyebrow {
	font-family: var(--pn-body);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pn-teal);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	line-height: 1.6;
}

.pn .pn-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pn-cyan);
	box-shadow: 0 0 0 3px var(--pn-cyan-25);
	flex: 0 0 auto;
}

/* Encabezado de sección */
.pn .pn-head {
	max-width: 640px;
	margin: 0 0 52px;
}

.pn .pn-head__title {
	font-size: clamp(28px, 3.6vw, 40px);
	margin-top: 14px;
}

.pn .pn-head__title:first-child {
	margin-top: 0;
}

.pn .pn-head__text {
	color: var(--pn-slate);
	margin-top: 14px;
	font-size: 17px;
}

.pn--compacta .pn-head__title {
	font-size: clamp(28px, 3.4vw, 38px);
}

.pn--compacta .pn-head__text {
	font-size: 16.5px;
}

/* Botones */
.pn .pn-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--pn-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.6;
	padding: 14px 26px;
	border-radius: 100px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease;
	white-space: nowrap;
	text-decoration: none;
}

.pn .pn-btn__icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.pn .pn-btn--primary,
.pn a.pn-btn--primary:visited {
	background-color: var(--pn-teal);
	color: var(--pn-white);
	box-shadow: 0 10px 22px -10px rgba(14, 88, 91, .6);
}

.pn .pn-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -10px rgba(14, 88, 91, .65);
	color: var(--pn-white);
}

.pn .pn-btn--ghost,
.pn a.pn-btn--ghost:visited {
	background-color: transparent;
	border-color: var(--pn-teal);
	color: var(--pn-teal);
}

.pn .pn-btn--ghost:hover {
	background-color: var(--pn-teal);
	color: var(--pn-white);
}

.pn .pn-btn--on-dark {
	background-color: var(--pn-cyan);
	color: var(--pn-ink);
	box-shadow: 0 10px 22px -10px rgba(62, 194, 206, .5);
}

.pn .pn-btn--sm {
	padding: 9px 16px;
	font-size: 13px;
}

.pn .pn-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

@media (max-width: 639px) {
	.pn .pn-btn {
		font-size: 12px;
		padding: 11px 21px;
		gap: 6px;
	}
}

/* Enlace de texto con flecha */
.pn .pn-more {
	color: var(--pn-teal);
	font-weight: 700;
	font-size: 14.5px;
}

.pn .pn-more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Partículas */
.pn .pn-particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
}

.pn .pn-particles__a {
	stop-color: var(--pn-cyan);
}

.pn .pn-particles__b {
	stop-color: var(--pn-teal);
}

@keyframes pnDriftA {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(14px, -10px); }
}

@keyframes pnDriftB {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-12px, 12px); }
}

@keyframes pnDriftC {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(10px, 10px); }
}

@keyframes pnParticleFade {
	0%, 100% { opacity: .35; }
	50% { opacity: .8; }
}

.pn .pn-node {
	animation: pnParticleFade 4.5s ease-in-out infinite;
	transform-origin: center;
	transform-box: fill-box;
}

.pn .pn-node.pa {
	animation-name: pnParticleFade, pnDriftA;
	animation-duration: 4.5s, 9s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-iteration-count: infinite, infinite;
}

.pn .pn-node.pb {
	animation-name: pnParticleFade, pnDriftB;
	animation-duration: 5.2s, 11s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-iteration-count: infinite, infinite;
	animation-delay: .8s, 0s;
}

.pn .pn-node.pc {
	animation-name: pnParticleFade, pnDriftC;
	animation-duration: 3.8s, 8s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-iteration-count: infinite, infinite;
	animation-delay: 1.6s, 0s;
}

/* Aparición al hacer scroll (solo con JS activo) */
.pn-js .pn .pn-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}

.pn-js .pn .pn-reveal.pn-in,
.elementor-editor-active .pn .pn-reveal,
.elementor-editor-preview .pn .pn-reveal {
	opacity: 1;
	transform: none;
}

/* Brillo (shimmer) en títulos */
@keyframes pnShimmer {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

.pn .pn-shimmer {
	background-size: 240% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: pnShimmer 6s ease-in-out infinite alternate;
	display: inline;
	background-image: linear-gradient(90deg, var(--pn-shimmer-base, var(--pn-ink)) 0%, var(--pn-shimmer-base, var(--pn-ink)) 36%, var(--pn-shimmer-glow, var(--pn-cyan)) 50%, var(--pn-shimmer-base, var(--pn-ink)) 64%, var(--pn-shimmer-base, var(--pn-ink)) 100%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Botón de video */
.pn .pn-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	z-index: 1;
	background: var(--pn-teal);
	color: var(--pn-white);
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 30px rgba(11, 11, 12, .4);
	transition: transform .2s ease;
}

.pn .pn-play:hover {
	transform: translate(-50%, -50%) scale(1.07);
}

.pn .pn-play svg {
	width: 26px;
	height: 26px;
	margin-left: 4px;
}

/* Ventana de video */
.pn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(11, 11, 12, .82);
}

.pn-lightbox__box {
	position: relative;
	width: min(980px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
}

.pn-lightbox__box iframe,
.pn-lightbox__box video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.pn-lightbox__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: #0b0b0c;
	cursor: pointer;
	font-size: 22px;
	line-height: 36px;
	padding: 0;
}

/* Aviso dentro del editor */
.pn-editor-note {
	padding: 14px 18px;
	border: 1px dashed #c3ced0;
	border-radius: 10px;
	background: #f7fafa;
	color: #3d4244;
	font: 13px/1.5 sans-serif;
}

/* ------------------------------------------------------------------
 * Clases para widgets de terceros (Avanzado › Clases CSS)
 * ------------------------------------------------------------------ */

/* Tarjeta blanca (contenedor del formulario de contacto) */
.e-con.pepnet-tarjeta,
.elementor-element.pepnet-tarjeta {
	background: var(--pn-white);
	border: 1px solid var(--pn-mist-2);
	border-radius: var(--pn-radius);
	padding: 32px;
}

.pepnet-tarjeta .pepnet-tarjeta-titulo .elementor-heading-title,
.pepnet-tarjeta-titulo .elementor-heading-title {
	font-family: var(--pn-display);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--pn-ink);
	margin: 0 0 22px;
}

/* Formulario de Elementor Pro con el aspecto PepNet */
.pepnet-form,
#solicitar-acceso {
	scroll-margin-top: calc(var(--pn-header-height, 78px) + 24px);
}

.pepnet-form .elementor-form-fields-wrapper {
	margin: 0;
}

.pepnet-form .elementor-field-group {
	margin-bottom: 18px;
	padding: 0;
}

.pepnet-form .elementor-field-group > label,
.pepnet-form .elementor-field-label {
	display: block;
	font-family: var(--pn-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--pn-ink);
	margin-bottom: 7px;
	padding: 0;
}

.pepnet-form .elementor-field-group .elementor-field-textual,
.pepnet-form .elementor-field-group input[type="text"],
.pepnet-form .elementor-field-group input[type="email"],
.pepnet-form .elementor-field-group input[type="tel"],
.pepnet-form .elementor-field-group textarea,
.pepnet-form .elementor-field-group select {
	width: 100%;
	padding: 13px 16px;
	border-radius: 12px;
	border: 1.5px solid var(--pn-mist-2);
	background: var(--pn-white);
	font-family: var(--pn-body);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pn-ink);
	outline: none;
	min-height: 0;
	box-shadow: none;
	transition: border-color .15s ease;
}

.pepnet-form .elementor-field-group .elementor-field-textual:focus,
.pepnet-form .elementor-field-group textarea:focus {
	border-color: var(--pn-teal);
}

.pepnet-form .elementor-field-group textarea {
	resize: vertical;
	min-height: 110px;
}

.pepnet-form .elementor-field-textual::placeholder {
	color: var(--pn-slate);
	opacity: .55;
}

.pepnet-form .e-form__buttons,
.pepnet-form .elementor-field-type-submit {
	margin-top: 6px;
	margin-bottom: 0;
}

.pepnet-form .elementor-button[type="submit"],
.pepnet-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	font-family: var(--pn-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.6;
	padding: 14px 26px;
	border-radius: 100px;
	border: 1.5px solid transparent;
	background-color: var(--pn-teal);
	color: var(--pn-white);
	box-shadow: 0 10px 22px -10px rgba(14, 88, 91, .6);
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}

.pepnet-form .elementor-button[type="submit"]:hover,
.pepnet-form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -10px rgba(14, 88, 91, .65);
}

.pepnet-form .elementor-message {
	font-family: var(--pn-body);
	font-size: 13.5px;
	margin-top: 12px;
}

@media (max-width: 639px) {
	.pepnet-form .elementor-button[type="submit"],
	.pepnet-form button[type="submit"] {
		width: 100%;
		font-size: 12px;
		padding: 11px 21px;
	}
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.pn .pn-node,
	.pn .pn-shimmer {
		animation: none;
	}

	.pn .pn-shimmer {
		background-position: 50% 50%;
	}

	.pn-js .pn .pn-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.pn .pn-btn,
	.pn .pn-btn:hover,
	.pn .pn-play:hover {
		transition: none;
		transform: none;
	}

	.pn .pn-play:hover {
		transform: translate(-50%, -50%);
	}
}