/* ============================================================
   CONTACTO — página /contacto/
   Reutiliza tokens globales de main.css (--brand-accent, --fg1..4,
   --border-default, --border-hairline, --font-display, --font-body).
   Tokens propios de esta página (verdes/whatsapp) se definen scoped
   abajo para no tocar el design system global.
   ============================================================ */

.contacto-page {
	--contact-green: #1B9E4D;
	--contact-wa: #25D366;
}

/* ============================================================
   1 · HERO
   ============================================================ */
.contacto-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #0B1120 0%, #0D1835 40%, #0F2060 75%, #1A3580 100%);
	padding: 80px 0 88px;
}
.contacto-hero-glow {
	position: absolute;
	top: -140px; right: -60px;
	width: 700px; height: 700px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(75,117,255,.32) 0%, transparent 70%);
	pointer-events: none;
}
.contacto-hero-inner { position: relative; max-width: 700px; }
.contacto-eyebrow-pill {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 7px 18px; border-radius: 9999px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.18);
	margin-bottom: 28px;
}
.contacto-eyebrow-pill i { width: 13px; height: 13px; color: rgba(255,255,255,.7); }
.contacto-eyebrow-pill span {
	font-family: var(--font-display); font-size: 11px; font-weight: 700;
	color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .1em;
}
.contacto-hero-h1 {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(30px, 4.5vw, 56px); line-height: 1.1;
	color: #fff; letter-spacing: -.025em; text-wrap: balance;
	max-width: 700px; margin: 0 0 20px;
}
.contacto-hero-h1 span { color: var(--brand-accent); }
.contacto-hero-sub {
	font-family: var(--font-body); font-weight: 400; font-size: 17px;
	color: rgba(255,255,255,.6); max-width: 520px; margin: 0; line-height: 1.6;
}

/* ============================================================
   2 · GRID GENERAL
   ============================================================ */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 52px;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 32px 96px;
}
@media (max-width: 960px) {
	.contact-grid { grid-template-columns: 1fr; padding: 48px 24px 64px; }
	.contact-sidebar { position: static !important; }
}

/* ============================================================
   3 · TARJETA DE FORMULARIO
   ============================================================ */
.contact-form-card {
	background: #fff;
	border-radius: 20px;
	border: 1px solid var(--border-default);
	box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.04);
	overflow: hidden;
}

/* Stepper */
.stepper {
	display: flex; align-items: center;
	padding: 24px 32px 20px;
	border-bottom: 1px solid var(--border-hairline);
}
.step-dot {
	width: 30px; height: 30px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-size: 12px; font-weight: 700;
	flex-shrink: 0; transition: all .2s ease;
}
.step-dot.done    { background: var(--brand-accent); color: #fff; }
.step-dot.active  { background: var(--fg1); color: #fff; }
.step-dot.pending { background: var(--color-neutral-100, #F1F5F9); color: var(--fg4); }
.step-label {
	font-family: var(--font-display); font-size: 12px; font-weight: 600;
	margin-left: 10px; white-space: nowrap;
}
.step-label.active  { color: var(--fg1); }
.step-label.pending { color: var(--fg4); }
.step-label.done    { color: var(--brand-accent); }
.step-line { flex: 1; height: 2px; background: var(--border-hairline); margin: 0 16px; border-radius: 1px; transition: background .3s ease; }
.step-line.completed { background: var(--brand-accent); }

/* Cuerpo del formulario */
.contact-form-body { padding: 28px 32px 0; }

/* ============================================================
   4 · JET-ENGINE FORMS — grid de 12 columnas + estilos base
   (JetEngine no trae CSS propio en frontend: se define aquí)
   ============================================================ */
.contact-form-body .jet-form { display: block; }
.contact-form-body .jet-form-page.jet-form-page--hidden { display: none; }
.contact-form-body .jet-form-row {
	display: flex; flex-wrap: wrap; gap: 20px;
	margin-bottom: 20px;
}
.contact-form-body .jet-form-row--hidden { display: none; }
.contact-form-body .jet-form-col { flex: 0 0 auto; min-width: 0; }
.contact-form-body .jet-form-col-12 { width: 100%; }
.contact-form-body .jet-form-col-6  { width: calc(50% - 10px); }
.contact-form-body .jet-form-col-4  { width: calc(33.333% - 14px); }
.contact-form-body .jet-form-push-8 { margin-left: calc(66.666% - 6px); }
@media (max-width: 640px) {
	.contact-form-body .jet-form-col-6,
	.contact-form-body .jet-form-col-4 { width: 100%; }
	.contact-form-body .jet-form-push-8 { margin-left: 0; }
}

/* Label */
.contact-form-body .jet-form__label { margin-bottom: 8px; }
.contact-form-body .jet-form__label-text {
	display: block;
	font-family: var(--font-display); font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .07em; color: var(--fg2);
}
.contact-form-body .jet-form__required { color: var(--brand-accent); margin-left: 3px; }

/* Input / select / textarea */
.contact-form-body .jet-form__field.text-field,
.contact-form-body .jet-form__field.select-field,
.contact-form-body .jet-form__field.textarea-field {
	width: 100%; padding: 12px 16px;
	border: 1.5px solid var(--border-default); border-radius: 10px;
	font-family: var(--font-body); font-size: 15px; color: var(--fg1);
	background: #fff; outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.contact-form-body .jet-form__field.text-field:focus,
.contact-form-body .jet-form__field.select-field:focus,
.contact-form-body .jet-form__field.textarea-field:focus {
	border-color: var(--brand-accent);
	box-shadow: 0 0 0 3px rgba(232,54,79,.1);
}
.contact-form-body .jet-form__field::placeholder { color: var(--fg4); }
.contact-form-body .jet-form__field.textarea-field { min-height: 110px; resize: vertical; }

.contact-form-body select.jet-form__field.select-field {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394A3B8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 42px;
}

/* WhatsApp: ícono a la izquierda dentro del input */
.contact-form-body [data-field="whatsapp"] .jet-form__field.text-field {
	padding-left: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.29-1.39a9.9 9.9 0 004.75 1.21h.005c5.46 0 9.91-4.45 9.91-9.91C21.97 6.45 17.52 2 12.04 2zm0 18.03h-.005a8.2 8.2 0 01-4.18-1.14l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 01-1.26-4.36c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 012.41 5.83c0 4.54-3.7 8.2-8.24 8.2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 18px;
}

/* Aviso de privacidad */
.contact-privacy {
	display: flex; align-items: center; gap: 8px;
	padding: 12px 16px; border-radius: 10px;
	background: rgba(27,158,77,.07);
	border: 1px solid rgba(27,158,77,.15);
	margin-bottom: 24px;
}
.contact-privacy i { width: 15px; height: 15px; color: var(--contact-green); flex-shrink: 0; }
.contact-privacy span { font-family: var(--font-body); font-size: 12px; color: var(--contact-green); }

/* ============================================================
   5 · TOGGLE TIPO DE PERSONA (radio → card)
   ============================================================ */
.jet-form-field-container[data-field="tipo_persona"] .jet-form__fields-group {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.jet-form-field-container[data-field="tipo_persona"] .jet-form__field-wrap { margin: 0; }
.jet-form-field-container[data-field="tipo_persona"] .jet-form__field-label.tipo-btn {
	padding: 12px; border-radius: 10px; border: 1.5px solid var(--border-default);
	cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px;
	transition: all .2s ease; position: relative;
}
.tipo-btn:has(input:checked) { border-color: var(--brand-accent); background: rgba(232,54,79,.05); }
.tipo-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tipo-btn-icon {
	width: 36px; height: 36px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-neutral-100, #F1F5F9); color: var(--fg3);
}
.tipo-btn:has(input:checked) .tipo-btn-icon { background: rgba(232,54,79,.15); color: var(--brand-accent); }
.tipo-btn-icon i { width: 18px; height: 18px; }
.tipo-btn-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--fg1); }
.tipo-btn-desc  { font-family: var(--font-body); font-size: 11px; color: var(--fg4); text-align: center; }

/* ============================================================
   6 · CARDS DE SERVICIO (checkbox → card, selección múltiple)
   Minimalista: solo ícono + título, sin descripción, una sola fila.
   ============================================================ */
.jet-form-field-container[data-field="servicio"] .jet-form__fields-group {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 480px) {
	.jet-form-field-container[data-field="servicio"] .jet-form__fields-group,
	.jet-form-field-container[data-field="tipo_persona"] .jet-form__fields-group { grid-template-columns: 1fr; }
}
.jet-form-field-container[data-field="servicio"] .jet-form__field-wrap { margin: 0; }
.jet-form-field-container[data-field="servicio"] .jet-form__field-label.svc-btn {
	padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--border-default);
	cursor: pointer; display: flex; align-items: center; gap: 10px;
	transition: all .2s ease; position: relative;
}
.svc-btn:has(input:checked) { border-color: var(--brand-accent); background: rgba(232,54,79,.05); }
.svc-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.svc-btn-icon {
	width: 30px; height: 30px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-neutral-100, #F1F5F9); color: var(--fg3);
	flex-shrink: 0;
}
.svc-btn:has(input:checked) .svc-btn-icon { background: var(--icon-bg); color: var(--icon-color); }
.svc-btn-icon i { width: 16px; height: 16px; }
.svc-btn-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--fg1); }

/* ============================================================
   7 · NAVEGACIÓN ENTRE PASOS (next-page / prev-page / submit)
   ============================================================ */
.contact-form-body .jet-form-row--page-break,
.contact-form-body .jet-form-row--submit {
	margin-bottom: 0; padding: 24px 0 40px;
	display: flex; align-items: center; justify-content: flex-end; gap: 16px;
}
.contact-form-body .jet-form-row--page-break .jet-form-col,
.contact-form-body .jet-form-row--submit .jet-form-col {
	width: auto; flex: 0 0 auto; margin-left: 0 !important;
}
.contact-form-body .jet-form__next-page-wrap,
.contact-form-body .jet-form__submit-wrap { display: flex; justify-content: flex-end; }
.contact-form-body .jet-form__next-page,
.contact-form-body .jet-form__submit {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-display); font-size: 15px; font-weight: 700;
	color: #fff; background: var(--brand-accent); border: none;
	border-radius: 9999px; padding: 13px 28px; cursor: pointer;
	box-shadow: var(--shadow-cta); transition: all .25s ease;
}
.contact-form-body .jet-form__next-page:hover,
.contact-form-body .jet-form__submit:hover {
	background: var(--brand-accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-cta-hover);
}
.contact-form-body .jet-form__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
/* El botón "Volver" es reubicado por JS (contacto.js) desde el label del primer
   campo del paso 2 hacia esta fila de navegación inferior, junto al submit. */
.contact-form-body .jet-form__prev-page {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-display); font-size: 14px; font-weight: 600;
	color: var(--fg3); background: none; border: none; cursor: pointer;
	transition: color .2s;
}
.contact-form-body .jet-form__prev-page:hover { color: var(--fg1); }
.contact-form-body .jet-form-row--submit:has(.jet-form__prev-page) { justify-content: space-between; }

/* Errores inline de validación (respuesta AJAX de JetEngine) */
.contact-form-body .jet-form__field-error {
	display: block; font-size: 11px; color: var(--brand-accent); margin-top: 6px;
}
.contact-form-body .jet-form-messages-wrap:empty { display: none; }

/* ============================================================
   8 · ESTADO DE ÉXITO
   ============================================================ */
.contact-success { padding: 56px 32px; text-align: center; }
.contact-success-icon {
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(27,158,77,.12); margin: 0 auto 20px;
	display: flex; align-items: center; justify-content: center;
}
.contact-success-icon i { width: 32px; height: 32px; color: var(--contact-green); }
.contact-success-h2 {
	font-family: var(--font-display); font-weight: 800; font-size: 24px;
	color: var(--fg1); margin: 0 0 10px;
}
.contact-success-p { font-family: var(--font-body); font-size: 15px; color: var(--fg3); margin: 0 0 22px; }
.contact-success-badges {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px;
}
.contact-success-badge {
	border-radius: 12px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--fg1);
}
.contact-success-badge i { width: 16px; height: 16px; }
.contact-success-wa {
	background: var(--contact-wa); color: #fff; border-radius: 9999px;
	padding: 12px 24px; display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-display); font-weight: 700; text-decoration: none;
	box-shadow: 0 4px 14px rgba(37,211,102,.3); transition: all .2s ease;
}
.contact-success-wa:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,211,102,.4); }
.contact-success-wa i { width: 17px; height: 17px; }

/* ============================================================
   9 · SIDEBAR
   ============================================================ */
.contact-sidebar {
	position: sticky; top: 86px;
	display: flex; flex-direction: column; gap: 18px;
}

/* Card 1 — CTA WhatsApp */
.sidebar-wa-card {
	background: linear-gradient(135deg, #075E54, #128C7E);
	border-radius: 16px; padding: 24px 22px;
	position: relative; overflow: hidden;
}
.sidebar-wa-card::before {
	content: ""; position: absolute; top: -30px; right: -30px;
	width: 130px; height: 130px; border-radius: 50%;
	background: rgba(255,255,255,.07);
}
.sidebar-wa-title {
	position: relative; font-family: var(--font-display); font-weight: 800; font-size: 17px;
	color: #fff; margin: 0 0 6px; display: flex; align-items: center; gap: 8px;
}
.sidebar-wa-title i { width: 18px; height: 18px; }
.sidebar-wa-text { position: relative; font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.8); margin: 0 0 16px; line-height: 1.5; }
.sidebar-wa-btn {
	position: relative; background: #fff; color: #075E54; border-radius: 9999px;
	padding: 11px 20px; display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-display); font-weight: 700; font-size: 13px; text-decoration: none;
	transition: transform .2s ease;
}
.sidebar-wa-btn:hover { transform: translateY(-1px); }
.sidebar-wa-btn i { width: 15px; height: 15px; }

/* Card 2 — Promesas de confianza */
.sidebar-trust-card {
	background: #fff; border: 1px solid var(--border-default);
	border-radius: 16px; padding: 22px 20px;
}
.sidebar-trust-item {
	display: flex; gap: 12px; padding: 14px 0;
	border-bottom: 1px solid var(--border-hairline);
}
.sidebar-trust-item:first-child { padding-top: 0; }
.sidebar-trust-item:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-trust-icon {
	width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.sidebar-trust-icon i { width: 17px; height: 17px; }
.sidebar-trust-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--fg1); margin: 0 0 3px; }
.sidebar-trust-desc  { font-family: var(--font-body); font-size: 12px; color: var(--fg3); line-height: 1.5; margin: 0; }

@media (max-width: 960px) {
	.sidebar-wa-btn, .sidebar-wa-title, .sidebar-wa-text { position: relative; }
}