/* ==========================================================================
   CLEA-CPG — Coming Soon
   Variables (--cs-*) se sobreescriben desde el Customizer.
   ========================================================================== */

:root {
	--cs-text: #06284d;      /* azul CLEA */
	--cs-accent: #d59a2a;    /* dorado CLEA */
	--cs-bg: #fbfaf7;
	--cs-bg-image: none;
	--cs-logo-w: 440px;

	--cs-font: 'Jost', 'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif;
	--cs-pad-x: clamp(1.5rem, 7.5vw, 9rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body.cs-body {
	margin: 0;
	background-color: var(--cs-bg);
	background-image: var(--cs-bg-image);
	background-size: cover;
	background-position: center;
	color: var(--cs-text);
	font-family: var(--cs-font);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { color: inherit; }

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
	word-wrap: normal !important;
}

/* Layout ------------------------------------------------------------------ */
.cs-page {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	isolation: isolate;
}

/* Descontar la barra de admin de WordPress (usuarios logueados) */
.admin-bar .cs-page { min-height: calc(100dvh - 32px); }
@media (max-width: 782px) {
	.admin-bar .cs-page { min-height: calc(100dvh - 46px); }
}

/* Franja dorada superior */
.cs-page::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--cs-text) 0 62%, var(--cs-accent) 62% 100%);
}

.cs-container {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--cs-pad-x);
}

.cs-main {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	padding-block: clamp(1.5rem, 5vh, 4.5rem) clamp(1rem, 3vh, 2.5rem);
}

/* Decoración: globo de red a la derecha */
.cs-deco {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(50vw, 900px);
	z-index: -1;
	pointer-events: none;
	/* se funde con el fondo hacia el contenido */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(0deg, transparent 0, #000 18%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(0deg, transparent 0, #000 18%);
	mask-composite: intersect;
}
.cs-globe { display: block; width: 100%; height: 100%; }
.cs-globe path { vector-effect: non-scaling-stroke; stroke-width: 1.15px; }
.cs-globe .cs-globe__thin { stroke-width: 1px; }
.cs-globe__navy { stroke: var(--cs-text); opacity: .55; }
.cs-globe__gold { stroke: var(--cs-accent); opacity: .7; }
.cs-globe__thin { stroke: var(--cs-text); opacity: .18; }
.cs-globe__node--navy { fill: var(--cs-text); }
.cs-globe__node--gold { fill: var(--cs-accent); }
.cs-globe__node--pale { fill: #9fb3c8; }
.cs-globe__node circle:last-child { stroke: #fff; stroke-width: 2.5; }
.cs-globe__halo { opacity: 0; }
.cs-no-deco .cs-deco { display: none; }

/* Logo -------------------------------------------------------------------- */
.cs-logo {
	margin: 0 0 clamp(1.25rem, 4.5vh, 3.5rem);
	font-size: 0;
	line-height: 0;
}

.cs-logo__link {
	display: inline-block;
	text-decoration: none;
}

.cs-logo__svg,
.cs-logo__img {
	display: block;
	/* el logo también se limita por el alto de la pantalla */
	width: min(var(--cs-logo-w), 52vh);
	max-width: 100%;
	height: auto;
}

.cs-logo__navy { fill: var(--cs-text); }
.cs-logo__gold { fill: var(--cs-accent); }

.cs-logo__text {
	font-family: var(--cs-font);
	font-size: 3rem;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1;
}

/* Contenido --------------------------------------------------------------- */
.cs-content {
	max-width: 38rem;
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: 2px solid var(--cs-accent);
}

.cs-eyebrow {
	margin: 0 0 clamp(.4rem, 1.2vh, .9rem);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--cs-accent);
}

.cs-title {
	margin: 0 0 clamp(.6rem, 2vh, 1.25rem);
	font-weight: 400;
	font-size: clamp(1.75rem, min(3.3vw, 5.4vh), 3rem);
	line-height: 1.15;
	letter-spacing: -.005em;
	text-wrap: balance;
	max-width: 15em;
}

.cs-intro {
	margin: 0 0 clamp(1rem, 3vh, 2.25rem);
	max-width: 33rem;
	font-size: clamp(.95rem, 2vh, 1.0625rem);
	font-weight: 300;
	line-height: 1.6;
	opacity: .9;
}

.cs-contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
}

.cs-contacts__item {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: 1rem;
	font-weight: 400;
}

.cs-contacts__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: .5rem;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--cs-accent) 55%, transparent);
	color: var(--cs-accent);
	transition: background-color .2s, color .2s;
}

.cs-contacts__icon svg {
	width: 100%;
	height: 100%;
}

.cs-contacts__item:hover .cs-contacts__icon {
	background: var(--cs-accent);
	color: #fff;
}

.cs-contacts__link {
	text-decoration: none;
	min-height: 44px; /* tap target */
	display: inline-flex;
	align-items: center;
	word-break: break-word;
}

a.cs-contacts__link:hover,
a.cs-contacts__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--cs-accent);
}

/* Footer ------------------------------------------------------------------ */
.cs-footer {
	flex-shrink: 0;
	padding-block: 0 clamp(.75rem, 2.5vh, 1.75rem);
}

.cs-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 2rem;
	flex-wrap: wrap;
	position: relative;
	padding-top: clamp(.75rem, 2vh, 1.25rem);
}

.cs-footer__inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: var(--cs-pad-x);
	right: var(--cs-pad-x);
	border-top: 1px solid color-mix(in srgb, var(--cs-text) 12%, transparent);
}

.cs-footer__copy {
	margin: 0;
	font-size: .875rem;
	font-weight: 300;
	opacity: .85;
}

.cs-credit {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .75rem;
	font-style: italic;
	text-decoration: none;
	color: var(--cs-text);
}

.cs-credit__mark {
	display: inline-flex;
	width: 1.05rem;
	height: 1.15rem;
}

.cs-credit__mark svg { width: 100%; height: 100%; }

.cs-credit__name {
	font-weight: 600;
	letter-spacing: -.02em;
}

.cs-credit__img {
	display: block;
	height: 1.15rem;
	width: auto;
}

a.cs-credit:hover { opacity: .75; }

:focus-visible {
	outline: 2px solid var(--cs-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Entrada suave ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.cs-logo,
	.cs-content > * {
		animation: cs-fade-up .8s cubic-bezier(.2, .7, .2, 1) both;
	}
	.cs-eyebrow  { animation-delay: .15s !important; }
	.cs-title    { animation-delay: .25s !important; }
	.cs-intro    { animation-delay: .35s !important; }
	.cs-contacts { animation-delay: .45s !important; }
	.cs-deco { animation: cs-fade 1.4s ease .3s both; }
	.cs-globe__halo {
		transform-box: fill-box;
		transform-origin: center;
		animation: cs-pulse 4.8s ease-out infinite;
		animation-delay: var(--d, 0s);
	}
}

@keyframes cs-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
@keyframes cs-pulse {
	0%   { opacity: .35; transform: scale(.45); }
	70%  { opacity: 0;   transform: scale(1); }
	100% { opacity: 0; }
}
@keyframes cs-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1280px) and (min-width: 769px) {
	.cs-deco { width: 44vw; }
	.cs-content { max-width: 34rem; }
}

@media (max-width: 768px) {
	.cs-main { align-items: flex-start; padding-top: 3rem; }
	.cs-contacts { flex-direction: column; gap: .25rem; }
	.cs-deco {
		top: auto;
		height: 34vh;
		width: 100vw;
		opacity: .22;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%);
		mask-image: linear-gradient(180deg, transparent 0, #000 45%);
	}
}

@media (max-width: 480px) {
	.cs-logo__svg,
	.cs-logo__img { width: min(var(--cs-logo-w), 64vw, 260px); }
	.cs-logo { margin-bottom: 1.75rem; }
	.cs-globe__nodes { display: none; }
	.cs-contacts__link { position: relative; z-index: 1; }
	.cs-intro { font-size: 1rem; }
	.cs-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}