/* Blanc Contacto — página y formulario. Usa los tokens del theme Blanc con valores de respaldo. */
.bcf-page,
.bcf {
	--bcf-ink: var(--b-text, #0a0a0a);
	--bcf-bg: var(--b-bg, #fff);
	--bcf-muted: var(--b-muted, #666);
	--bcf-line: var(--b-line, #e8e8e8);
	--bcf-soft: var(--b-surface, #f3f3f3);
	--bcf-err: var(--b-error, #b42318);
	--bcf-ease: cubic-bezier(.2, .7, .1, 1);
	--bcf-gutter: var(--gutter, 16px);
}

/* ------------------------------------------------------------------
 * Página: información (izquierda, fija) + formulario (derecha)
 * ------------------------------------------------------------------ */
.bcf-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	min-height: calc(100vh - var(--b-sticky-top, 0px));
	border-top: 1px solid var(--bcf-line);
}
.bcf-page__info { border-right: 1px solid var(--bcf-line); }
.bcf-page__sticky {
	position: sticky;
	top: var(--b-sticky-top, 0px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	min-height: calc(100vh - var(--b-sticky-top, 0px));
	padding: clamp(2rem, 4vw, 3.5rem) var(--bcf-gutter) 2rem;
}
.bcf-page__kicker { margin: 0 0 1.25rem; font-size: .75rem; color: var(--bcf-muted); }
.bcf-page__title {
	margin: 0 0 1.5rem;
	font-family: var(--b-font-body, inherit);
	font-size: clamp(3.25rem, 8.4vw, 8.5rem);
	font-weight: 500;
	letter-spacing: -.065em;
	line-height: .86;
}
.bcf-page__intro { max-width: 26rem; font-size: .9375rem; line-height: 1.6; color: var(--bcf-muted); }
.bcf-page__intro p { margin: 0 0 .75rem; }

.bcf-channels { margin: 0; }
.bcf-channels__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--bcf-line); font-size: .875rem; line-height: 1.5; }
.bcf-channels__row:last-child { border-bottom: 1px solid var(--bcf-line); }
.bcf-channels dt { color: var(--bcf-muted); font-size: .75rem; padding-top: .1rem; }
.bcf-channels dd { margin: 0; }
.bcf-channels address { font-style: normal; }
.bcf-channels a { color: var(--bcf-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--bcf-ease); }
.bcf-channels a:hover { background-size: 100% 1px; }
.bcf-channels svg { vertical-align: -1px; }
.bcf-channels__link { display: inline-block; margin-top: .35rem; font-size: .8125rem; }

.bcf-page__form { padding: clamp(2rem, 4vw, 3.5rem) clamp(var(--bcf-gutter), 5vw, 6rem) 4rem; }
.bcf-page__form .bcf { max-width: 680px; }

/* ------------------------------------------------------------------
 * Formulario
 * ------------------------------------------------------------------ */
.bcf { color: var(--bcf-ink); }
.bcf__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bcf__form { display: grid; gap: 2.25rem; }

/* Motivos como fichas */
.bcf__topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.bcf__legend { margin: 0 0 1rem; padding: 0; font-family: var(--b-font-body, inherit); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.bcf__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.bcf-chip { position: relative; cursor: pointer; }
.bcf-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bcf-chip span {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem;
	border: 1px solid var(--bcf-line); background: var(--bcf-bg);
	font-size: .8125rem; letter-spacing: -.01em; white-space: nowrap;
	transition: background-color .25s var(--bcf-ease), border-color .25s var(--bcf-ease), color .25s var(--bcf-ease);
}
.bcf-chip:hover span { border-color: var(--bcf-ink); }
.bcf-chip input:checked + span { border-color: var(--bcf-ink); background: var(--bcf-ink); color: var(--bcf-bg); }
.bcf-chip input:focus-visible + span { outline: 2px solid var(--bcf-ink); outline-offset: 2px; }
.is-invalid .bcf-chip span { border-color: color-mix(in srgb, var(--bcf-err) 45%, var(--bcf-line)); }

/* Campos con etiqueta flotante y línea inferior */
.bcf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.bcf-f { position: relative; min-width: 0; }
.bcf-f[hidden] { display: none; }
.bcf-f--full { grid-column: 1 / -1; }
.bcf .bcf-f input,
.bcf .bcf-f textarea,
.bcf .bcf-f select {
	display: block; width: 100%; min-height: 58px; margin: 0;
	padding: 1.45rem 0 .5rem;
	border: 0; border-bottom: 1px solid var(--bcf-line); border-radius: 0;
	background: transparent; box-shadow: none; outline: 0;
	color: var(--bcf-ink); font: inherit; font-size: 1rem; line-height: 1.4;
	transition: border-color .25s var(--bcf-ease);
	-webkit-appearance: none; appearance: none;
}
.bcf .bcf-f select { padding-right: 1.75rem; cursor: pointer; }
.bcf .bcf-f textarea { min-height: 120px; resize: none; overflow: hidden; }
.bcf .bcf-f input:hover, .bcf .bcf-f textarea:hover, .bcf .bcf-f select:hover { border-bottom-color: var(--bcf-muted); }
/* Línea negra que crece desde la izquierda al enfocar */
.bcf .bcf-f input, .bcf .bcf-f textarea { background: linear-gradient(var(--bcf-ink), var(--bcf-ink)) 0 100% / 0 1px no-repeat; transition: border-color .25s var(--bcf-ease), background-size .45s var(--bcf-ease); }
.bcf .bcf-f select { background: linear-gradient(var(--bcf-ink), var(--bcf-ink)) 0 100% / 0 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23777' stroke-width='1.5'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right center / 1.1rem no-repeat; transition: background-size .45s var(--bcf-ease); }
.bcf .bcf-f input:focus, .bcf .bcf-f textarea:focus { background-size: 100% 1px; }
.bcf .bcf-f select:focus { background-size: 100% 1px, 1.1rem; }
.bcf-f label {
	position: absolute; left: 0; top: 1.1rem;
	font-size: 1rem; color: var(--bcf-muted); pointer-events: none;
	transform-origin: left top;
	transition: transform .3s var(--bcf-ease), color .3s var(--bcf-ease);
}
.bcf-f input:focus + label, .bcf-f input:not(:placeholder-shown) + label,
.bcf-f textarea:focus + label, .bcf-f textarea:not(:placeholder-shown) + label,
.bcf-f label.is-fixed { transform: translateY(-.85rem) scale(.75); color: var(--bcf-ink); }
.bcf__opt { color: var(--bcf-muted); }
.bcf__count { position: absolute; right: 0; top: calc(100% + .45rem); font-size: .6875rem; color: var(--bcf-muted); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .2s; }
.bcf-f:focus-within .bcf__count, .bcf-f.has-value .bcf__count { opacity: 1; }
.bcf__count.is-near { color: var(--bcf-err); }

/* Errores */
.bcf__err { min-height: 0; margin: .4rem 0 0; font-size: .75rem; line-height: 1.4; color: var(--bcf-err); }
.bcf__err:empty { display: none; }
.is-invalid input, .is-invalid textarea, .is-invalid select { border-bottom-color: var(--bcf-err) !important; }
.is-invalid label { color: var(--bcf-err) !important; }
.bcf__status { margin: -1rem 0 0; padding: .85rem 1rem; background: color-mix(in srgb, var(--bcf-err) 7%, var(--bcf-bg)); color: var(--bcf-err); font-size: .8125rem; }
.bcf__status[hidden] { display: none; }

/* Consentimiento */
.bcf-check { position: relative; display: flex; gap: .75rem; align-items: flex-start; font-size: .8125rem; line-height: 1.5; color: var(--bcf-muted); cursor: pointer; }
.bcf-check input { position: absolute; width: 18px; height: 18px; margin: 0; opacity: 0; cursor: pointer; }
.bcf-check__box { display: grid; place-items: center; flex: 0 0 18px; height: 18px; margin-top: 1px; border: 1px solid var(--bcf-muted); color: var(--bcf-bg); transition: background-color .2s, border-color .2s; }
.bcf-check__box svg { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--bcf-ease); }
.bcf-check input:checked + .bcf-check__box { border-color: var(--bcf-ink); background: var(--bcf-ink); }
.bcf-check input:checked + .bcf-check__box svg { opacity: 1; transform: none; }
.bcf-check input:focus-visible + .bcf-check__box { outline: 2px solid var(--bcf-ink); outline-offset: 2px; }
.bcf-check a { color: var(--bcf-ink); text-underline-offset: .2em; }
.is-invalid .bcf-check__box { border-color: var(--bcf-err); }

/* Botón */
.bcf__foot { display: grid; gap: .85rem; }
.bcf__submit {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	width: 100%; min-height: 58px; padding: 0 1.25rem 0 1.4rem;
	border: 0; border-radius: 0; background: var(--bcf-ink); color: var(--bcf-bg);
	font: inherit; font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; text-decoration: none;
	cursor: pointer; overflow: hidden; isolation: isolate;
	background-image: linear-gradient(rgb(255 255 255 / .12), rgb(255 255 255 / .12)); background-size: 0 100%; background-repeat: no-repeat;
	transition: background-size .5s var(--bcf-ease), opacity .2s, transform .2s var(--bcf-ease);
}
.bcf__submit:hover { background-size: 100% 100%; color: var(--bcf-bg); }
.bcf__submit:active { transform: scale(.995); }
.bcf__arrow { transition: transform .4s var(--bcf-ease); }
.bcf__submit:hover .bcf__arrow { transform: translateX(4px); }
.bcf__submit.is-loading { pointer-events: none; color: transparent; }
.bcf__submit.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 1.5px solid var(--bcf-bg); border-right-color: transparent; border-radius: 50%; animation: bcf-spin .7s linear infinite; }
.bcf__submit--inline { display: inline-flex; width: auto; min-width: 16rem; }
.bcf__note { margin: 0; font-size: .75rem; color: var(--bcf-muted); }
@keyframes bcf-spin { to { transform: rotate(360deg); } }

/* Enviado */
.bcf-done { display: grid; justify-items: start; gap: 1rem; padding: 2rem 0; outline: 0; animation: bcf-rise .7s var(--bcf-ease) both; }
.bcf-done[hidden] { display: none; }
.bcf-done__icon svg circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: bcf-draw .9s var(--bcf-ease) .15s forwards; }
.bcf-done__icon svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: bcf-draw .5s var(--bcf-ease) .75s forwards; }
.bcf-done__title { margin: .5rem 0 0; font-family: var(--b-font-body, inherit); font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.bcf-done__text { max-width: 28rem; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--bcf-muted); }
.bcf-done__ref { margin: 0 0 1rem; font-size: .75rem; color: var(--bcf-muted); font-variant-numeric: tabular-nums; }
.bcf-done__ref:empty { display: none; }
@keyframes bcf-draw { to { stroke-dashoffset: 0; } }
@keyframes bcf-rise { from { opacity: 0; transform: translateY(12px); } }

/* Entrada escalonada */
.bcf-contact-page .bcf-page__head > *, .bcf-contact-page .bcf__form > * { animation: bcf-rise .8s var(--bcf-ease) both; }
.bcf-contact-page .bcf-page__title { animation-delay: .06s; }
.bcf-contact-page .bcf-page__intro { animation-delay: .12s; }
.bcf-contact-page .bcf__form > :nth-child(5) { animation-delay: .1s; }
.bcf-contact-page .bcf__form > :nth-child(6) { animation-delay: .16s; }
.bcf-contact-page .bcf__form > :nth-child(7) { animation-delay: .22s; }
.bcf-contact-page .bcf__form > :nth-child(8) { animation-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
	.bcf *, .bcf-page * { animation: none !important; transition: none !important; }
	.bcf-done__icon svg * { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------
 * Móvil: título → formulario → datos de contacto
 * ------------------------------------------------------------------ */
@media (max-width: 899px) {
	.bcf-page__grid { display: flex; flex-direction: column; min-height: 0; }
	.bcf-page__info, .bcf-page__sticky { display: contents; }
	.bcf-page__head { order: 1; padding: 2rem var(--bcf-gutter) 0; }
	.bcf-page__form { order: 2; padding: 2.25rem var(--bcf-gutter) 3rem; }
	.bcf-channels { order: 3; margin: 0 var(--bcf-gutter) 3rem; }
	.bcf-page__title { font-size: clamp(3.5rem, 18vw, 5.5rem); margin-bottom: 1rem; }
	.bcf-channels__row { grid-template-columns: 6rem minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.bcf__grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.bcf__chips { gap: .35rem; }
	.bcf-chip span { min-height: 38px; padding: 0 .85rem; }
}
.bcf-channels a svg { display: inline-block; }
.bcf-f--full .bcf__err { padding-right: 6rem; }