/*
 * serviNec: página «Atención al cliente» (template-atencion.php)
 * assets/css/atencion.css · incluye el estilo del formulario de Fluent Forms dentro de .snec-ayuda__form
 */

.snec-ayuda {
	--ay-blue: #1565e8;
	--ay-ink: #111827;
	--ay-soft: #374151;
	--ay-bg: #f3f6fb;
	--ay-circle: #edf2fa;
	--ay-tint: #e6edf9;
	background: var(--ay-bg);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: var(--ay-ink);
	text-align: center;
	overflow: hidden;
}

.snec-ayuda__wrap {
	max-width: 840px;
	margin: 0 auto;
	padding: 28px 16px 88px;
	box-sizing: border-box;
}

/* ── Ilustración ─────────────────────────────────────────────────────────── */
.snec-ayuda__hero {
	--c: 240px;              /* diámetro del círculo */
	--cy: 128px;             /* centro vertical del círculo */
	position: relative;
	height: 278px;
	margin: 0 auto 22px;
}

.snec-ayuda__circle,
.snec-ayuda__arc {
	position: absolute;
	top: calc(var(--cy) - var(--c) / 2);
	left: calc(50% - var(--c) / 2);
	width: var(--c);
	height: var(--c);
	border-radius: 50%;
	box-sizing: border-box;
}

.snec-ayuda__circle {
	background: radial-gradient(circle at 50% 45%, #ebf0fa 0, var(--ay-circle) 55%, #eff3fb 100%);
	box-shadow: 0 0 0 16px rgba(236, 241, 250, .55), 0 0 0 17px rgba(255, 255, 255, .7);
}

.snec-ayuda__arc {
	--a: calc(var(--c) + 34px);
	top: calc(var(--cy) - var(--a) / 2);
	left: calc(50% - var(--a) / 2);
	width: var(--a);
	height: var(--a);
	border: 2px solid transparent;
	border-left-color: var(--ay-blue);
	transform: rotate(38deg);
}

.snec-ayuda__dots {
	position: absolute;
	top: calc(var(--cy) - 16px);
	left: calc(50% + 132px);
	width: 15px;
	height: 23px;
	background: radial-gradient(circle, #4f8bf0 1.3px, transparent 1.8px) 0 0 / 8px 8px;
}

.snec-ayuda__bubble {
	position: absolute;
	top: calc(var(--cy) - 78px);
	left: calc(50% - 82px);
	width: 196px;
	height: auto;
	-webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
}

.snec-ayuda__chip {
	position: absolute;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #ffffff;
	color: var(--ay-blue);
	box-shadow: 0 6px 18px rgba(30, 64, 140, .08);
}

.snec-ayuda__chip svg {
	width: 46%;
	height: 46%;
}

.snec-ayuda__chip--cascos {
	top: calc(var(--cy) + 50px);
	left: calc(50% - 266px);
	width: 52px;
	height: 52px;
}

.snec-ayuda__chip--escudo {
	top: calc(var(--cy) - 50px);
	left: calc(50% + 290px);
	width: 54px;
	height: 54px;
}

.snec-ayuda__badge {
	position: absolute;
	top: calc(var(--cy) + 32px);
	left: calc(50% + 140px);
	margin: 0;
	padding: 12px 14px;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 6px 18px rgba(30, 64, 140, .06);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	color: var(--ay-ink);
}

/* ── Título y texto ──────────────────────────────────────────────────────── */
.snec-ayuda__title {
	margin: 0 0 20px;
	font-size: clamp(30px, 3.4vw, 38px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--ay-ink);
}

.snec-ayuda__lead {
	margin: 0 0 30px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ay-soft);
}

/* ── Formulario (Fluent Forms) ───────────────────────────────────────────── */
.snec-ayuda__form {
	max-width: 510px;
	margin: 0 auto;
	text-align: left;
}

.snec-ayuda__form .fluentform,
.snec-ayuda__form .frm-fluent-form {
	margin: 0;
}

.snec-ayuda__form form.frm-fluent-form {
	position: relative;
	padding: 5px 5px 5px 50px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 6px 22px rgba(30, 64, 140, .07);
	transition: border-color .15s, box-shadow .15s;
}

.snec-ayuda__form form.frm-fluent-form:focus-within {
	border-color: #bcd2f8;
	box-shadow: 0 0 0 4px rgba(21, 101, 232, .1), 0 6px 22px rgba(30, 64, 140, .07);
}

/* El fieldset de Fluent Forms lleva estilos en línea: solo lo convertimos en fila. */
.snec-ayuda__form form.frm-fluent-form fieldset {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* Icono de sobre */
.snec-ayuda__form form.frm-fluent-form::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	width: 18px;
	height: 18px;
	background: #374151;
	transform: translateY(-50%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5L12 13l8.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5L12 13l8.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

.snec-ayuda__form .fluentform .ff-el-group {
	flex: 1;
	min-width: 0;
	margin: 0;
}

.snec-ayuda__form .fluentform .ff-el-input--label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.snec-ayuda__form .fluentform .ff-el-input--content {
	position: static;
}

.snec-ayuda__form .fluentform .ff-el-form-control {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font: 400 14px/1.2 'Inter', system-ui, sans-serif;
	color: var(--ay-ink);
}

.snec-ayuda__form .fluentform .ff-el-form-control::placeholder {
	color: #6b7280;
	opacity: 1;
}

.snec-ayuda__form .fluentform .ff-el-form-control:focus {
	outline: none;
	box-shadow: none;
}

.snec-ayuda__form .fluentform .ff_submit_btn_wrapper {
	flex: none;
	margin: 0;
	padding: 0;
}

.snec-ayuda__form .fluentform .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 44px;
	padding: 0 22px 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--ay-blue) !important;
	color: #ffffff !important;
	font: 600 14px/1 'Inter', system-ui, sans-serif;
	cursor: pointer;
	transition: background .15s;
}

.snec-ayuda__form .fluentform .ff-btn-submit::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.snec-ayuda__form .fluentform .ff-btn-submit:hover {
	background: #0f55c9 !important;
	opacity: 1;
}

.snec-ayuda__form .fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--ay-blue);
	outline-offset: 3px;
}

/* Error bajo la píldora */
.snec-ayuda__form .fluentform .error.text-danger {
	position: absolute;
	top: calc(100% + 8px);
	left: 24px;
	margin: 0;
	font-size: 12.5px;
	color: #d92d20;
}

/* Mensaje de enviado */
.snec-ayuda__form .ff-message-success {
	margin: 0;
	padding: 16px 22px;
	border: 0;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 6px 22px rgba(30, 64, 140, .07);
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	color: var(--ay-ink);
}

.snec-ayuda__aviso {
	padding: 14px;
	border: 1px dashed #94a3b8;
	border-radius: 12px;
	font-size: 14px;
	text-align: center;
}

/* ── Ventajas ────────────────────────────────────────────────────────────── */
.snec-ayuda__perks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 48px auto 0;
	padding: 22px 8px;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 14px;
	background: rgba(255, 255, 255, .7);
	box-shadow: 0 10px 30px rgba(30, 64, 140, .06);
}

.snec-ayuda__perk {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 6px 12px;
}

.snec-ayuda__perk + .snec-ayuda__perk {
	border-left: 1px solid #d5d9e0;
}

.snec-ayuda__perk-ico {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--ay-blue);
}

.snec-ayuda__perk-ico svg,
.snec-ayuda__call-ico svg,
.snec-ayuda__call-btn svg {
	display: block;
	width: 100%;
	height: 100%;
}

.snec-ayuda__perk-txt {
	font-size: 15px;
	font-weight: 500;
	color: var(--ay-ink);
}

/* ── Llamada ─────────────────────────────────────────────────────────────── */
.snec-ayuda__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px 18px;
	max-width: 760px;
	margin: 44px auto 0;
	padding: 24px 32px;
	box-sizing: border-box;
	border-radius: 14px;
	background: var(--ay-tint);
}

.snec-ayuda__call-ico {
	flex: none;
	width: 38px;
	height: 38px;
	color: var(--ay-blue);
}

.snec-ayuda__call-txt {
	margin: 0 20px 0 0;
	font-size: 15px;
	color: var(--ay-ink);
}

.snec-ayuda__call-title {
	display: none;
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	color: var(--ay-ink);
}

.snec-ayuda__call-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	height: 38px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--ay-blue);
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s;
}

.snec-ayuda__call-btn svg {
	width: 15px;
	height: 15px;
}

.snec-ayuda__call-btn:hover {
	background: #0f55c9;
	color: #ffffff;
}

.snec-ayuda__call-btn:focus-visible {
	outline: 2px solid var(--ay-blue);
	outline-offset: 3px;
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
	.snec-ayuda__chip--escudo {
		left: calc(50% + 200px);
		top: calc(var(--cy) - 110px);
	}

	.snec-ayuda__chip--cascos {
		left: calc(50% - 230px);
	}
}

/* ── Móvil ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.snec-ayuda__wrap {
		padding: 8px 12px 56px;
	}

	.snec-ayuda__hero {
		--c: 200px;
		--cy: 112px;
		height: 270px;
		margin-bottom: 26px;
	}

	.snec-ayuda__arc {
		--a: calc(var(--c) + 30px);
	}

	.snec-ayuda__bubble {
		top: calc(var(--cy) - 66px);
		left: calc(50% - 70px);
		width: 166px;
	}

	.snec-ayuda__dots {
		left: calc(50% + 108px);
		top: calc(var(--cy) - 38px);
	}

	.snec-ayuda__chip--escudo {
		top: 12px;
		left: auto;
		right: 6px;
		width: 50px;
		height: 50px;
	}

	.snec-ayuda__chip--cascos {
		top: calc(var(--cy) + 92px);
		left: 6px;
		width: 50px;
		height: 50px;
	}

	.snec-ayuda__badge {
		top: calc(var(--cy) + 108px);
		left: calc(50% + 48px);
		padding: 10px 12px;
		font-size: 11.5px;
	}

	.snec-ayuda__title {
		max-width: 320px;
		margin: 0 auto 14px;
		font-size: 34px;
	}

	.snec-ayuda__lead {
		margin-bottom: 26px;
		font-size: 15.5px;
	}

	.snec-ayuda__form form.frm-fluent-form {
		padding-left: 18px;
	}

	.snec-ayuda__form form.frm-fluent-form::before {
		display: none;
	}

	.snec-ayuda__form .fluentform .ff-btn-submit {
		height: 46px;
		padding: 0 18px 0 22px;
		font-size: 15px;
		font-weight: 500;
	}

	.snec-ayuda__perks {
		margin-top: 36px;
		padding: 18px 4px;
	}

	.snec-ayuda__perk {
		flex-direction: column;
		gap: 8px;
		padding: 4px 6px;
	}

	.snec-ayuda__perk + .snec-ayuda__perk {
		border-left: 0;
	}

	.snec-ayuda__perk-ico {
		width: 20px;
		height: 20px;
	}

	.snec-ayuda__perk-txt {
		font-size: 14px;
		line-height: 1.3;
	}

	.snec-ayuda__call {
		flex-direction: column;
		margin-top: 32px;
		padding: 30px 20px;
	}

	.snec-ayuda__call-ico {
		width: 36px;
		height: 36px;
	}

	.snec-ayuda__call-txt {
		display: none;
	}

	.snec-ayuda__call-title {
		display: block;
	}

	.snec-ayuda__call-btn {
		height: 46px;
		padding: 0 26px;
		font-size: 16px;
	}

	.snec-ayuda__call-btn svg {
		width: 18px;
		height: 18px;
	}
}