@charset "utf-8";

/****

FieldBox — tema del proyecto sobre WebSet
Última modificación: 19OCT26

Único archivo de estilos que se toca por proyecto: common.css no se edita.
Fuente de verdad de los tokens: fieldbox-preinscripcion.html (maqueta V05,
oscuro · violeta · Plus Jakarta Sans).

Los tokens van en tres capas:
  1. La paleta de la marca, con nombres de color.
  2. Los roles: qué hace cada color en el sistema.
  3. Los pares: con qué color se escribe encima de cada superficie.

****/


/**** Tipografía ****/

/* Auto-hospedada (fontsource, subset latin: cubre á é í ó ú ñ ¿ ¡).
   Variable: un solo archivo cubre de 200 a 800. */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
}


/**** 1. Paleta de la marca ****/

:root {
	--noche:        #0a0a10;   /* fondo */
	--noche-1:      #121218;   /* superficie */
	--noche-2:      #16161e;   /* superficie elevada (inputs) */
	--linea:        #1e1e28;   /* bordes */
	--linea-hover:  #2a2a36;
	--blanco:       #f5f5f7;
	--gris:         #a8a8b3;
	--gris-oscuro:  #6c6c78;
	--violeta:      #6f5ce0;
	--naranja:      #e8834e;
	--verde:        #34d399;
}


/**** 2. Roles ****/

:root {
	--page-w: 75.5rem;

	--fon-t: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	--fon-h: var(--fon-t);

	--fon-w1: 400;
	--fon-w5: 500;
	--fon-w7: 700;
	--fon-w9: 800;

	/* Contraste sobre --surface (#0a0a10):
	   blanco 18,6:1  ·  gris 8,6:1  ·  gris-oscuro 3,9:1 (solo texto grande o no esencial)
	   violeta 4,0:1 — alcanza para texto grande y bordes, NO para texto chico:
	   para eso, --accent-on-dark (lo calcula common.css). */
	--text:            var(--blanco);
	--text-muted:      var(--gris);
	--text-faint:      var(--gris-oscuro);
	--surface:         var(--noche);
	--surface-alt:     var(--noche-1);
	--surface-raised:  var(--noche-2);
	--surface-inverse: var(--noche-1);
	--border:          var(--linea);
	--accent:          var(--violeta);
	--accent-fill:     var(--violeta);
	/* common.css usa --brand como color de TEXTO chico (rótulos de campos,
	   h6, dt): el violeta puro no llega a 4,5:1 sobre el fondo. */
	--brand:           var(--accent-on-dark);
	--accent-soft:     color-mix(in srgb, var(--violeta) 15%, transparent);

	--critical: var(--naranja);
	--positive: var(--verde);

	--rad-s: .4375rem;   /* 7px */
	--rad-m: .75rem;     /* 12px */
	--rad-l: 1.125rem;   /* 18px */
	--rad-bt: 100rem;

	--sha-s: none;
	--sha-m: none;
	--sha-l: none;
}


/**** 3. Pares fondo / texto ****/

:root {
	color-scheme: dark;
	--on-inverse:     var(--blanco);
	--on-accent-fill: #ffffff;   /* blanco sobre violeta: 4,9:1 (el #0a0a10 de la landing daba 4,0:1) */
	--on-media:       var(--blanco);
}


/**** Ajustes de diseño ****/

/* common.css escribe el botón con --surface encima del relleno; en un tema
   oscuro eso es texto negro sobre violeta. Se usa el par declarado arriba. */
.bt {
	--bt-fg: var(--on-accent-fill);
	font-weight: var(--fon-w7);
	letter-spacing: .02em;
}

.main h1 {
	letter-spacing: -.03em;
}

::placeholder {
	color: var(--text-faint);
	opacity: 1;
}
::selection {
	background: color-mix(in srgb, var(--violeta) 40%, transparent);
}

/* Campos: superficie elevada y halo de foco en violeta, como la maqueta */
.field :is(input, select, textarea) {
	background: var(--surface-raised);
	border-radius: var(--rad-m);
	font-weight: var(--fon-w5);

	&:hover {
		border-color: var(--linea-hover);
	}
	&:focus {
		outline: none;
		border-color: var(--accent);
		background: var(--surface-alt);
		box-shadow: 0 0 0 3px var(--accent-soft);
	}
}


/**** Específico de FieldBox ****/

/* Wordmark de texto hasta que esté el logo oficial en SVG */
.wordmark {
	display: block;
	font-size: clamp(2.75rem, 2rem + 3vw, 3.5rem);
	font-weight: var(--fon-w9);
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--text);
}
.eyebrow {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .23em;
	text-transform: uppercase;
	color: var(--text-muted);
}
h1 em {
	font-style: normal;
	color: var(--accent-on-dark);
}

/* Halo de acento detrás del contenido */
.halo {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset-inline-start: 50%;
		inset-block-start: 10%;
		inline-size: min(56rem, 140vw);
		aspect-ratio: 1;
		transform: translate(-50%, -30%);
		background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
		pointer-events: none;
	}
}

/**** Formularios (pre-inscripción y contacto) ****/

/* No usan .form a propósito: main.js engancha un envío simulado a todo .form,
   y estos envían de verdad (ver formularios.js). */
.fb-form {
	&[hidden] { display: none; } /* un display propio le ganaría al atributo hidden */

	/* Error marcado por JS al enviar (el form es novalidate: :user-invalid
	   de common.css no se activa sin interacción previa con el campo) */
	& [aria-invalid="true"] {
		border-color: var(--critical);
	}
	& [aria-invalid="true"] ~ .error-msg {
		display: block;
	}
	& .cf-turnstile:has(iframe) {
		margin-block-end: var(--space-3);
	}
}
/* Trampa para bots: fuera de pantalla, nadie la ve ni la completa */
.hp {
	position: absolute;
	inset-inline-start: -100vw;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}
/* Aviso de resultado: recibe el foco por JS para que el lector de pantalla
   lo anuncie; no es un control, no necesita el anillo de foco. */
[data-form-ok]:focus {
	outline: none;
}

:is(.main, .hero) :is(.lead, .form-intro) {
	color: var(--text-muted);
}
.main .form-intro {
	margin-block-start: var(--space-6);
	font-size: calc(var(--sca-t) * .875);
}

/* Pre-inscripción. Sin row-gap: el aire va como margen de cada campo, así
   el widget de Turnstile (0px mientras no pide interacción) no suma un hueco. */
.preinscripcion {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-3);
	max-inline-size: 34rem;
	margin-inline: auto;
	text-align: start;

	& .field {
		margin: 0 0 var(--space-3);
	}
	& .field-full,
	& .bt,
	& .legal,
	& .cf-turnstile {
		grid-column: 1 / -1;
	}
	& input {
		block-size: 3.5rem;
		padding-block: 0;
	}
	& .bt {
		inline-size: 100%;
		min-block-size: 3.5rem;
		margin-block-start: var(--space-2);
	}
	& .legal {
		margin: var(--space-3) 0 0;
		text-align: center;
		font-size: calc(var(--sca-t) * .75);
		color: var(--text-faint);
	}
	& .cf-turnstile {
		display: flex;
		justify-content: center;
	}

	@media (width <= 640px) {
		grid-template-columns: 1fr;
	}
}
.preinscripcion-ok {
	max-inline-size: 34rem;
	margin-inline: auto;
	text-align: start;
}


/**** Landing ****/

/* Header sobre el fondo de la página, con una línea fina abajo como la maqueta */
.header {
	border-block-end: 1px solid var(--border);

	/* Entre el corte a menú móvil de common.css (960px) y ~1180px, los cuatro
	   links no entran con el gap por defecto y se partían en dos renglones. */
	@media (width > 960px) {
		& :is(nav, .menu) a {
			white-space: nowrap;
		}
	}
	@media (960px < width <= 1180px) {
		& ul {
			gap: calc(var(--sca-t) * 1.25);
		}
		& > .page {
			gap: var(--space-4);
		}
	}
}
.branding {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: calc(var(--sca-t) * 1.125);
	letter-spacing: -.02em;

	&::before {
		content: "";
		inline-size: 1.4em;
		block-size: 1.4em;
		border-radius: var(--rad-s);
		background: var(--accent);
	}
}

/* Hero sin foto, alineado a la izquierda como la maqueta */
.hero.left {
	text-align: start;
	min-block-size: min(46rem, calc(100svh - var(--header-h)));

	& .content {
		margin-inline: 0;
		max-inline-size: 45rem;
	}
	& p {
		max-inline-size: 34rem;
	}
}

/* Antetítulo de sección: "01 · QUÉ ES FIELDBOX" */
:is(.main, .hero) .kicker {
	font-size: .75rem;
	font-weight: var(--fon-w7);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent-on-dark);
	margin-block-end: var(--flow-tight);
}

.main .muted,
.card p {
	color: var(--text-muted);
}

.foto {
	border-radius: var(--rad-l);
	border: 1px solid var(--border);
}

/* Perfiles (Para quiénes): foto, título y texto sueltos, sin card.
   Las fotos llegan teñidas con la paleta vieja (verde, amarillo, violeta):
   se pasan a grises y se funden sobre el acento, así las tres quedan en el
   mismo duotono y siguen al tema si cambia el violeta. */
.perfiles {
	& h3 {
		font-size: var(--sca-h5);
		margin-block-end: var(--flow-tight);
	}
	& p {
		color: var(--text-muted);
	}
}
.perfil {
	background: var(--accent);
	/* El radio lo pone el contenedor y la imagen no lleva uno propio:
	   common.css le da --rad-l a todo img de .main, y si no coincide con el
	   del contenedor asoma el violeta del fondo en las esquinas. */
	border-radius: var(--rad-l);
	overflow: hidden;
	margin-block-end: var(--space-4);

	& img {
		display: block;
		inline-size: 100%;
		aspect-ratio: 2 / 1;
		object-fit: cover;
		filter: grayscale(1) brightness(.85) contrast(1.15);
		mix-blend-mode: luminosity;
		opacity: .85;
	}
}
/* Va aparte y con .main: `.main :is(img, .video, .stack)` de common.css
   pesa como clase + clase (el :is toma su argumento más específico). */
.main .perfil img {
	border-radius: 0;
}

/* Servicios: grilla 2x2 con divisorias de 1px (el fondo asoma por el gap) */
.servicios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--rad-l);
	overflow: hidden;

	& > article {
		background: var(--surface);
		padding: var(--space-6);
	}
	& .icon {
		display: block;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		color: var(--brand);
		margin-block-end: var(--space-4);
	}
	& h3 {
		font-size: var(--sca-h5);
	}
	& p {
		color: var(--text-muted);
		margin: 0;
	}

	@media (width <= 760px) {
		grid-template-columns: 1fr;
	}
}

.stats dt {
	color: var(--accent-on-dark);
}

/* Logos de los socios: llegan con fondo blanco, van en un círculo blanco */
.socio img {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border-radius: 50%;
	background: #fff;
	object-fit: contain;
}

/* Contacto */
.fb-form .row {
	gap: 0 var(--space-3); /* el gap de .row es para bloques de página, no para campos */

	& + .field {
		margin-block-start: 0; /* ídem el aire que common.css suma después de una .row */
	}
}
.contacto .fb-form .bt {
	margin-block-start: var(--space-2);
}
.main dl.contacto-datos {
	margin-block-start: var(--space-5);

	& dt {
		font-size: .75rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--text-muted); /* --text-faint no llega a 4,5:1 en texto chico */
		font-weight: var(--fon-w7);
	}
	& dd {
		font-size: calc(var(--sca-t) * 1.0625);
	}
	& dd + dt {
		margin-block-start: var(--space-5);
	}
}
/* Bajada del formulario: no es un título de sección, es una invitación */
.main .form-titulo {
	font-size: calc(var(--sca-t) * 1.125);
	font-weight: var(--fon-w5);
	line-height: 1.5;
	color: var(--text);
	max-inline-size: 28rem;
	margin-block-end: var(--space-5);
}

/* Nombres de los socios: etiqueta del logo, no título */
.main .socio h3 {
	font-size: var(--sca-t);
	font-weight: var(--fon-w7);
	letter-spacing: 0;
}


/**** Footer ****/

.footer {
	color: var(--text-muted);
	background: var(--surface-alt);
	padding-block: var(--space-7) var(--space-5);

	& .branding {
		color: var(--text);
		margin-block-end: var(--flow);
	}
	& p {
		max-inline-size: 22rem;
	}
	/* Títulos de columna: common.css los pinta con --accent, que como texto
	   chico no llega a 4,5:1; --brand es la versión accesible */
	& p.title {
		color: var(--brand);
		font-size: .75rem;
		letter-spacing: .12em;
		text-transform: uppercase;
	}
	& nav a:hover {
		color: var(--text);
	}
	& .legal {
		font-size: .8125rem;

		& p {
			max-inline-size: none;
		}
	}
}
.social a {
	color: var(--on-accent-fill);
	background: var(--accent-fill);
}


/**** Animaciones de aparición ****/

/* Con animaciones atadas al scroll (CSS puro), no con el .reveal que agrega
   main.js: ese esquema oculta el contenido hasta que un IntersectionObserver
   avisa, y si no avisa (webview raro, captura para la vista previa de redes)
   la página queda en blanco. Acá, donde el navegador no soporta
   animation-timeline (Firefox hoy), el contenido simplemente se ve quieto.

   Sutil: un poco de opacidad y 24px de recorrido mientras el bloque entra
   en pantalla. Nada se mueve con prefers-reduced-motion. */
@keyframes entrar {
	from {
		opacity: 0;
		translate: 0 1.5rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.main .section :is(.page > :not(.row), .row > *) {
			animation: entrar linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
		/* Escalonado: cada hermano termina de entrar un poco más tarde */
		.main .section .row > :nth-child(2) { animation-range: entry 5% entry 65%; }
		.main .section .row > :nth-child(3) { animation-range: entry 10% entry 75%; }
	}

	/* Hero: entra al cargar la página (no depende del scroll) */
	.hero .content > * {
		animation: entrar .8s cubic-bezier(.2, .7, .2, 1) both;
	}
	.hero .content > :nth-child(2) { animation-delay: .08s; }
	.hero .content > :nth-child(3) { animation-delay: .16s; }
	.hero .content > :nth-child(4) { animation-delay: .24s; }
}