/*
Theme Name: Acceso
Description: Web de captación por invitación. Modo claro y oscuro automáticos; el naranja se reserva para las acciones.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: acceso
*/

/* ---------- Modo oscuro: sigue el ajuste del dispositivo ---------- */
@media (prefers-color-scheme: dark) {
	:root:root {
		--wp--preset--color--fondo: #10151D;
		--wp--preset--color--superficie: #171E29;
		--wp--preset--color--tinta: #EEF1F5;
		--wp--preset--color--suave: #A9B2C0;
		--wp--preset--color--linea: #2A3342;
		--wp--preset--color--enlace: #7CC4D8;
		--wp--preset--color--zona: #5FB3C9;
		--wp--preset--color--accion: #FB8A3C;
		--wp--preset--color--accion-texto: #10151D;
		--wp--preset--color--pie: #0B0F15;
		--wp--preset--color--campo: #0E131A;
		--wp--preset--color--error: #FF9B8F;
	}
}

:root {
	--acceso-radio: 10px;
	--acceso-seccion: clamp(64px, 9vw, 104px);
}

body { -webkit-font-smoothing: antialiased; }
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--enlace);
	outline-offset: 2px;
}

/* ---------- Cabecera ---------- */
.cabecera { border-bottom: 1px solid var(--wp--preset--color--linea); }
.cabecera__fila { padding-block: 14px; }
.cabecera .wp-block-site-title { margin: 0; font-family: var(--wp--preset--font-family--titulos); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.cabecera .wp-block-site-title a { color: var(--wp--preset--color--tinta); text-decoration: none; }
.cabecera .boton-borde .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--accion);
	border: 2px solid var(--wp--preset--color--accion);
	font-size: 16px; padding: 10px 18px; min-height: 44px;
}

/* ---------- Secciones de las landings ---------- */
.principal { padding-block: var(--acceso-seccion); }
.principal > .wp-block-post-content > * + * { margin-top: var(--acceso-seccion); }
.antetitulo {
	margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--wp--preset--color--enlace);
}
.entradilla { font-size: var(--wp--preset--font-size--entradilla); line-height: 1.5; color: var(--wp--preset--color--suave); }
.texto-suave, .principal p { color: var(--wp--preset--color--suave); }
.principal p strong { color: var(--wp--preset--color--tinta); font-weight: 700; }

.wp-block-button__link { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -8px var(--wp--preset--color--accion); }
.wp-block-button__link:hover { filter: brightness(1.06); }

.hero { gap: 64px; align-items: center; }
.hero .wp-block-heading { margin-top: 20px; }
.tarjeta {
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--acceso-radio);
	padding: clamp(16px, 2.5vw, 32px);
}
.ilustracion svg { display: block; width: 100%; height: auto; }
.ilustracion .rejilla { stroke: var(--wp--preset--color--linea); stroke-width: 1; }
.ilustracion .banda, .icono .banda { fill: var(--wp--preset--color--zona); }
.ilustracion .linea { fill: none; stroke: var(--wp--preset--color--tinta); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ilustracion .giro { fill: var(--wp--preset--color--superficie); stroke: var(--wp--preset--color--tinta); stroke-width: 2.5; }
.icono svg { display: block; width: 40px; height: 40px; }
.icono .trazo { fill: none; stroke: var(--wp--preset--color--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.que-es { gap: 32px; }
.que-es .tarjeta { padding: 28px; }
.que-es p { margin: 20px 0 0; }

.pasos { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: paso; display: grid; gap: 20px; }
.pasos li { counter-increment: paso; display: flex; gap: 16px; align-items: flex-start; color: var(--wp--preset--color--suave); }
.pasos li::before {
	content: counter(paso); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-top: -6px; border-radius: 50%;
	border: 2px solid var(--wp--preset--color--tinta); color: var(--wp--preset--color--tinta); font-weight: 700;
}
.acceso-bloque { gap: 96px; align-items: flex-start; }
.nota-formulario { font-size: 16px; margin: 16px 0 0; }

@media (max-width: 781px) {
	.hero, .que-es, .acceso-bloque { gap: 36px; }
	.hero .wp-block-button, .hero .wp-block-button__link { width: 100%; }
	.que-es .tarjeta { background: none; border: 0; border-top: 1px solid var(--wp--preset--color--linea); border-radius: 0; padding: 20px 0; display: flex; gap: 16px; }
	.que-es .tarjeta p { margin: 0; }
	.que-es { gap: 0; }
}

/* ---------- Páginas legales ---------- */
.legal h2 { font-size: 24px; margin-top: 40px; }
.legal li { color: var(--wp--preset--color--suave); }

/* ---------- Pie ---------- */
.pie { background: var(--wp--preset--color--pie); border-top: 1px solid var(--wp--preset--color--linea); padding-block: 40px 48px; }
.pie p { margin: 0; font-size: 16px; color: var(--wp--preset--color--suave); max-width: 820px; }
.pie .pie__enlaces { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pie .pie__enlaces a, .pie .pie__enlaces span { padding: 8px 0; display: inline-block; }

/* ---------- Fluent Forms con el estilo de la web ---------- */
.fluentform { font-family: var(--wp--preset--font-family--texto); }
.fluentform .ff-el-group { margin-bottom: 20px; }
.fluentform .ff-el-input--label label { font-size: 17px; font-weight: 600; color: var(--wp--preset--color--tinta); }
.fluentform .ff-el-form-control {
	min-height: 52px; padding: 0 16px; font-size: 17px; font-family: inherit;
	color: var(--wp--preset--color--tinta); background: var(--wp--preset--color--campo);
	border: 1.5px solid var(--wp--preset--color--suave); border-radius: var(--acceso-radio);
}
.fluentform textarea.ff-el-form-control { padding: 12px 16px; min-height: 120px; }
.fluentform .ff-el-form-control:focus { border-color: var(--wp--preset--color--enlace); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--enlace) 25%, transparent); outline: 0; }
.fluentform .ff-el-form-control::placeholder { color: var(--wp--preset--color--suave); opacity: 0.8; }
.fluentform .ff-el-tc label, .fluentform .ff_tc_label, .fluentform .ff-el-form-check-label { font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--suave); font-weight: 400; }
.fluentform input[type="checkbox"], .fluentform input[type="radio"] { width: 22px; height: 22px; accent-color: var(--wp--preset--color--accion); }
.fluentform .ff-el-form-check { margin-bottom: 8px; }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--error); }
.fluentform .error, .fluentform .text-danger, .fluentform .ff-el-is-error .error { color: var(--wp--preset--color--error); font-size: 16px; margin-top: 6px; }
.fluentform .ff-btn-submit, .fluentform .ff-btn-submit:hover, .fluentform .ff-btn-submit:focus {
	width: 100%; min-height: 54px; border: 0; border-radius: var(--acceso-radio);
	background: var(--wp--preset--color--accion) !important; color: var(--wp--preset--color--accion-texto) !important;
	font-family: inherit; font-size: 19px; font-weight: 700; cursor: pointer;
	box-shadow: 0 6px 16px -8px var(--wp--preset--color--accion);
}
.fluentform .ff-btn-submit:disabled { opacity: 0.7; cursor: progress; }
.ff-message-success { border: 0; box-shadow: none; padding: 0; background: none; color: var(--wp--preset--color--suave); font-size: 17px; }
.ff-message-success .ff-gracias-titulo { font-family: var(--wp--preset--font-family--titulos); font-size: 28px; color: var(--wp--preset--color--tinta); margin: 0 0 8px; }
.ff-message-success .ff-gracias-titulo strong { font-weight: 500; }
.fluentform .ff-errors-in-stack { color: var(--wp--preset--color--error); }

/* ---------- Cabecera en el móvil: todo en una línea ---------- */
.cabecera .wp-block-site-title, .cabecera .wp-block-button__link { white-space: nowrap; }
@media (max-width: 600px) {
	.cabecera .wp-block-site-title { font-size: 19px; }
	.cabecera .boton-borde .wp-block-button__link { font-size: 15px; padding: 8px 14px; min-height: 44px; }
}