/* contact-views.css — /contact con lenguaje minimal de mox.cl home/blog.
   Tokens semánticos de base4 + accent Stripe blue (#0570DE) consistente con
   hero/cta de la home. Sin gradientes saturados, sin backdrop-blur, sin shadows
   exagerados: flat cards + borde + glow radial sutil. */

.contact-wrap{
	--ct-accent:#0570DE;
	--ct-accent-hover:#0061C2;
	--ct-accent-soft:rgba(5,112,222,.12);
	--ct-accent-ring:rgba(5,112,222,.18);
	--ct-success:var(--color-success,#34C759);
	--ct-success-soft:rgba(52,199,89,.14);
	--ct-bg:var(--bg-primary);
	/* Card más oscuro que --bg-secondary (#1C1C1E) en dark — el secondary se ve
	   demasiado claro contra el canvas #000. Match con --bg-card del home (#111). */
	--ct-card:#111111;
	--ct-card-hover:#1a1a1a;
	--ct-input:#1a1a1a;
	--ct-input-focus:#1a1a1a;
	--ct-border:var(--border-primary);
	--ct-border-strong:var(--color-border-strong);
	--ct-text:var(--text-primary);
	--ct-text-soft:var(--text-secondary);
	--ct-text-faint:var(--text-tertiary);
}

[data-theme="light"] .contact-wrap{
	--ct-card:#F7F8FA;
	--ct-card-hover:#F0F2F5;
	--ct-input:#FFFFFF;
	--ct-input-focus:#FFFFFF;

	position:relative;
	display:block;
	background:var(--ct-bg);
	overflow:hidden;
	isolation:isolate;
}

/* Fondo: glow radial + dot-grid 32px con máscara vertical, idéntico patrón a
   .hero-home / .cta-section / .services-section de la home. */
.contact-wrap::before{
	content:'';
	position:absolute;inset:0;
	background-image:
		radial-gradient(circle at 50% 0%,rgba(5,112,222,.10) 0%,transparent 45%),
		radial-gradient(circle at 1px 1px,var(--ct-border) 1px,transparent 0);
	background-size:100% 100%,32px 32px;
	-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
	mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
	pointer-events:none;
	z-index:0;
}

.contact-container{
	position:relative;
	z-index:1;
	max-width:880px;
	margin:0 auto;
	padding:80px 24px 64px;
}

/* ============================================================
   HERO
   ============================================================ */
.contact-hero{
	text-align:center;
	padding:0 0 56px;
}
.contact-hero-badge{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:5px 12px 5px 10px;
	background:var(--ct-card);
	border:1px solid var(--ct-border);
	border-radius:100px;
	font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
	font-size:11.5px;
	font-weight:500;
	letter-spacing:.01em;
	color:var(--ct-text-soft);
	margin-bottom:24px;
	box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="light"] .contact-hero-badge{
	box-shadow:0 1px 2px rgba(15,23,42,.05),inset 0 1px 0 rgba(255,255,255,.6);
}
.contact-hero-badge-dot{
	width:6px;height:6px;border-radius:50%;
	background:var(--ct-success);
	box-shadow:0 0 0 3px var(--ct-success-soft);
	animation:contactBadgePulse 2s infinite;
}
@keyframes contactBadgePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.contact-hero-badge-dot{animation:none}}

.contact-hero h1{
	font-family:var(--font-display);
	font-size:clamp(2rem,5vw,3rem);
	font-weight:700;
	line-height:1.1;
	letter-spacing:-.03em;
	color:var(--ct-text);
	margin:0 0 16px;
	text-wrap:balance;
}
.contact-hero p{
	font-size:1rem;
	color:var(--ct-text-soft);
	line-height:1.6;
	margin:0 auto;
	max-width:520px;
	text-wrap:balance;
}

/* Progress bar 3 pasos — flat */
.progress-bar{
	display:flex;
	justify-content:center;
	gap:8px;
	margin-top:36px;
}
.progress-step{
	width:48px;height:3px;
	background:var(--ct-border);
	border-radius:3px;
	transition:background-color .25s ease,width .25s ease;
}
.progress-step.active{
	background:var(--ct-accent);
	width:72px;
}
.progress-step.done{
	background:var(--ct-success);
}

/* ============================================================
   WIZARD (pasos 1 y 2)
   ============================================================ */
.wizard-section{
	width:100%!important;
	animation:contactFadeIn .35s ease;
}
.wizard-step{display:none}
.wizard-step.active{display:block}

.wizard-title{
	color:var(--ct-text);
	font-size:1.05rem;
	font-weight:600;
	text-align:center;
	margin:0 0 28px;
	letter-spacing:-.01em;
}

/* Cards estilo Typeform: outline simple, letter key (A/B/C/D), check al seleccionar.
   Texto en grid (col 2) — el icon (col 1) se reasigna a "letter key" vía counter
   CSS. El <svg> interno queda oculto: lo conservamos en el markup para no romper
   el contrato del wizard JS pero la visual es pura tipografía. */
.wizard-grid{
	counter-reset:wzletter;
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
	max-width:560px;
	margin:0 auto;
}
.wizard-card{
	counter-increment:wzletter;
	position:relative;
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:14px;
	align-items:center;
	padding:14px 48px 14px 16px;
	background:transparent;
	border:1.5px solid var(--ct-border);
	border-radius:10px;
	cursor:pointer;
	text-align:left;
	transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.wizard-card:hover{
	border-color:var(--ct-accent);
	background:var(--ct-accent-soft);
}
.wizard-card.selected{
	border-color:var(--ct-accent);
	background:var(--ct-accent-soft);
}

/* Letter key (A, B, C, D) — generado vía counter, reemplaza el icon SVG. */
.wizard-card-icon{
	grid-row:1 / -1;
	align-self:center;
	width:28px;height:28px;
	margin:0;
	background:transparent;
	border:1.5px solid var(--ct-border);
	border-radius:6px;
	display:flex;align-items:center;justify-content:center;
	font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
	font-size:12px;
	font-weight:600;
	color:var(--ct-text-soft);
	transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.wizard-card-icon svg{display:none}
.wizard-card-icon::before{content:counter(wzletter, upper-alpha)}

.wizard-card:hover .wizard-card-icon{
	border-color:var(--ct-accent);
	color:var(--ct-accent);
}
.wizard-card.selected .wizard-card-icon{
	background:var(--ct-accent);
	border-color:var(--ct-accent);
	color:#fff;
}

.wizard-card h3{
	grid-column:2;grid-row:1;
	color:var(--ct-text);
	font-size:.95rem;
	font-weight:500;
	margin:0;
	letter-spacing:-.005em;
}
.wizard-card p{
	grid-column:2;grid-row:2;
	color:var(--ct-text-soft);
	font-size:.8rem;
	margin:2px 0 0;
	line-height:1.4;
}

/* Check al seleccionar (lado derecho) */
.wizard-card::after{
	content:'';
	position:absolute;
	right:16px;top:50%;
	transform:translateY(-50%);
	width:18px;height:18px;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230570DE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>");
	background-size:18px 18px;
	background-position:center;
	background-repeat:no-repeat;
	opacity:0;
	transition:opacity .15s ease;
}
.wizard-card.selected::after{opacity:1}

/* Quick links (acceso rápido) — alineado al ancho del grid */
.wizard-quick{
	margin:24px auto 0;
	max-width:560px;
	padding:18px 20px;
	background:var(--ct-card);
	border:1px solid var(--ct-border);
	border-radius:12px;
	display:none;
}
.wizard-quick.show{display:block;animation:contactFadeIn .25s ease}
.wizard-quick-title{
	color:var(--ct-text-soft);
	font-size:.8rem;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.05em;
	margin-bottom:10px;
	display:flex;
	align-items:center;
	gap:6px;
}
.wizard-quick-title svg{
	width:14px;height:14px;
	color:var(--ct-accent);
}
.wizard-quick-links{display:flex;flex-wrap:wrap;gap:8px}
.wizard-quick-link{
	padding:6px 12px;
	background:var(--ct-bg);
	border:1px solid var(--ct-border);
	border-radius:100px;
	color:var(--ct-text-soft);
	font-size:.8rem;
	font-weight:500;
	text-decoration:none;
	transition:border-color .12s ease,color .12s ease;
}
.wizard-quick-link:hover{
	border-color:var(--ct-accent);
	color:var(--ct-accent);
}

/* Nav buttons — alineados con el ancho del grid (560px) */
.wizard-nav{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	margin:32px auto 0;
	max-width:560px;
}
.wizard-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:11px 20px;
	border-radius:8px;
	font-family:inherit;
	font-size:.9rem;
	font-weight:600;
	letter-spacing:.005em;
	line-height:1.2;
	cursor:pointer;
	border:1px solid transparent;
	transition:background-color .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.wizard-btn-back{
	background:transparent;
	color:var(--ct-text);
	border-color:var(--ct-border);
}
.wizard-btn-back:hover{border-color:var(--ct-border-strong)}
.wizard-btn-next{
	background:var(--ct-accent);
	color:#fff;
}
.wizard-btn-next:hover{background:var(--ct-accent-hover)}
.wizard-btn-next:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ct-accent-ring)}
.wizard-btn-next:disabled{
	opacity:.45;
	cursor:not-allowed;
	background:var(--ct-accent);
}
.wizard-btn-next svg{width:16px;height:16px}

/* ============================================================
   FORM (paso 3)
   ============================================================ */
.mcontact_section{
	display:none;
	width:100%!important;
	animation:contactFadeIn .35s ease;
}
.mcontact_card{
	background:transparent;
	border:1.5px solid var(--ct-border);
	border-radius:16px;
	padding:36px;
}
.mcontact_header{
	margin-bottom:28px;
	padding-bottom:24px;
	border-bottom:1px solid var(--ct-border);
}
.mcontact_badge{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:5px 12px;
	background:var(--ct-accent-soft);
	color:var(--ct-accent);
	border-radius:100px;
	font-size:.75rem;
	font-weight:600;
	letter-spacing:.01em;
	margin-bottom:14px;
}
.mcontact_badge svg{width:13px;height:13px}
.mcontact_header h2{
	font-family:var(--font-display);
	font-size:1.5rem;
	font-weight:700;
	color:var(--ct-text);
	margin:0 0 6px;
	letter-spacing:-.02em;
}
.mcontact_header p{
	color:var(--ct-text-soft);
	margin:0;
	font-size:.925rem;
}

.mcontact_grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:18px;
}
.mcontact_field{position:relative}
.mcontact_field.full{grid-column:span 2}
.mcontact_label{
	display:block;
	font-size:.8rem;
	font-weight:600;
	color:var(--ct-text);
	margin-bottom:8px;
	letter-spacing:.005em;
}
.mcontact_label small{
	color:var(--ct-text-faint);
	font-weight:400;
}
.mcontact_label .req{color:var(--ct-accent)}
.mcontact_input{
	width:100%;
	padding:11px 14px;
	background:var(--ct-input);
	border:1px solid var(--ct-border);
	border-radius:10px;
	font-family:inherit;
	font-size:.925rem;
	color:var(--ct-text);
	transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease;
}
.mcontact_input::placeholder{color:var(--ct-text-faint)}
.mcontact_input:focus{
	outline:0;
	border-color:var(--ct-accent);
	background:var(--ct-input-focus);
	box-shadow:0 0 0 3px var(--ct-accent-ring);
}
.mcontact_textarea{
	min-height:128px;
	resize:vertical;
	line-height:1.55;
}

.mcontact_footer{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	margin-top:28px;
}
.mcontact_back{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:11px 14px;
	background:transparent;
	color:var(--ct-text);
	border:1px solid var(--ct-border);
	border-radius:8px;
	font-family:inherit;
	font-size:.9rem;
	font-weight:600;
	cursor:pointer;
	transition:border-color .12s ease,color .12s ease;
}
.mcontact_back:hover{border-color:var(--ct-border-strong)}
.mcontact_back svg{width:16px;height:16px}

.mcontact_submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:11px 22px;
	background:var(--ct-accent);
	color:#fff;
	border:0;
	border-radius:8px;
	font-family:inherit;
	font-size:.9rem;
	font-weight:600;
	letter-spacing:.005em;
	line-height:1.2;
	cursor:pointer;
	transition:background-color .12s ease,box-shadow .12s ease;
}
.mcontact_submit:hover{background:var(--ct-accent-hover)}
.mcontact_submit:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ct-accent-ring)}
.mcontact_submit:disabled{opacity:.45;cursor:not-allowed}
.mcontact_submit svg{width:16px;height:16px}

/* MOX Captcha widget — alinear con look */
.mcontact_field .mox-captcha{margin-top:2px}

/* ============================================================
   SUCCESS
   ============================================================ */
.success-section{
	display:none;
	animation:contactFadeIn .4s ease;
}
.success-card{
	background:transparent;
	border:1.5px solid var(--ct-border);
	border-radius:16px;
	padding:56px 40px;
	text-align:center;
}
.success-icon{
	width:72px;height:72px;
	background:var(--ct-success-soft);
	border:1px solid rgba(52,199,89,.25);
	border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	margin:0 auto 24px;
	animation:contactPop .45s cubic-bezier(.22,1.24,.4,1);
}
.success-icon svg{
	width:34px;height:34px;
	color:var(--ct-success);
	stroke:currentColor;
	stroke-width:2.2;
}
.success-card h2{
	font-family:var(--font-display);
	font-size:1.65rem;
	font-weight:700;
	color:var(--ct-text);
	margin:0 0 12px;
	letter-spacing:-.02em;
}
.success-card p{
	font-size:.975rem;
	color:var(--ct-text-soft);
	margin:0 auto 8px;
	max-width:480px;
	line-height:1.6;
}
.success-card .sub{
	font-size:.85rem;
	color:var(--ct-text-faint);
	margin-top:4px;
}

.success-actions{
	margin-top:32px;
	display:flex;
	justify-content:center;
	gap:12px;
	flex-wrap:wrap;
}
.success-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:11px 22px;
	border-radius:8px;
	font-size:.9rem;
	font-weight:600;
	text-decoration:none;
	border:1px solid transparent;
	transition:background-color .12s ease,color .12s ease,border-color .12s ease;
}
.success-btn svg{width:16px;height:16px}
.success-btn-primary{
	background:var(--ct-accent);
	color:#fff;
}
.success-btn-primary:hover{background:var(--ct-accent-hover)}
.success-btn-secondary{
	background:transparent;
	color:var(--ct-text);
	border-color:var(--ct-border);
}
.success-btn-secondary:hover{border-color:var(--ct-border-strong)}

.success-info{
	margin-top:36px;
	padding-top:24px;
	border-top:1px solid var(--ct-border);
}
.success-info p{
	font-size:.875rem;
	color:var(--ct-text-soft);
	margin:0;
}
.success-info a{
	color:var(--ct-accent);
	text-decoration:none;
	font-weight:600;
}
.success-info a:hover{text-decoration:underline}

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes contactFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes contactPop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
	.wizard-section,.mcontact_section,.success-section,.wizard-quick,.success-icon{animation:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:720px){
	.contact-container{padding:64px 18px 56px}
	.contact-hero{padding-bottom:40px}
	.contact-hero h1{font-size:1.85rem}
	.contact-hero p{font-size:.95rem}
	.progress-step{width:36px}
	.progress-step.active{width:56px}
	.wizard-card{padding:12px 44px 12px 14px}
	.wizard-card h3{font-size:.9rem}
	.wizard-nav{flex-direction:column-reverse;gap:10px}
	.wizard-btn{width:100%}
	.mcontact_card{padding:24px 20px;border-radius:14px}
	.mcontact_grid{grid-template-columns:1fr;gap:14px}
	.mcontact_field.full{grid-column:span 1}
	.mcontact_footer{flex-direction:column-reverse;align-items:stretch}
	.mcontact_back,.mcontact_submit{width:100%}
	.success-card{padding:40px 24px;border-radius:14px}
	.success-card h2{font-size:1.4rem}
	.success-actions{flex-direction:column}
	.success-btn{width:100%;justify-content:center}
}