/* =============================================================================
   ALTOR — Design System
   Tema hijo: altor-clean-child
   Pensado para landings con look & feel del proyecto Astro.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. @font-face — TT Modernoir (auto-hospedada)
   Coloca los .woff2 en /assets/fonts/. Si no tienes algún peso, comenta el bloque.
   ----------------------------------------------------------------------------- */
@font-face {
	font-family: 'TT Modernoir';
	src: url('../fonts/TT_Modernoir_Light.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TT Modernoir';
	src: url('../fonts/TT_Modernoir_Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TT Modernoir';
	src: url('../fonts/TT_Modernoir_Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TT Modernoir';
	src: url('../fonts/TT_Modernoir_DemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TT Modernoir';
	src: url('../fonts/TT_Modernoir_Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* -----------------------------------------------------------------------------
   2. Tokens (CSS custom properties)
   ----------------------------------------------------------------------------- */
:root {
	/* Paleta de marca */
	--teal:        #0A5156;
	--orange:      #F04A23;
	--deep:        #17232B;
	--light:       #E2ECEE;

	/* Fondos */
	--bg:          #17232B;
	--bg-2:        #0d1b22;
	--bg-light:    #E2ECEE;
	--bg-teal:     #0A5156;
	--bg-card:     rgba(255, 255, 255, 0.05);
	--border:      rgba(255, 255, 255, 0.09);
	--border-light: rgba(23, 35, 43, 0.12);

	/* Texto */
	--text:        #F0F4F5;
	--text-dark:   #17232B;
	--muted:       rgba(240, 244, 245, 0.5);
	--muted-dark:  rgba(23, 35, 43, 0.55);
	--white:       #FFFFFF;

	/* Accent helpers */
	--accent:      #F04A23;
	--accent-dim:  rgba(240, 74, 35, 0.14);
	--teal-dim:    rgba(10, 81, 86, 0.18);

	/* Tipografía */
	--font-head:   'TT Modernoir', 'Bebas Neue', 'Barlow Condensed', sans-serif;
	--font-body:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Radios */
	--r-sm:   8px;
	--r-md:   16px;
	--r-lg:   26px;
	--r-pill: 100px;

	/* Layout */
	--container-max: 1180px;
	--container-pad: 24px;
	--section-pad-y: 100px;

	/* Easing */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -----------------------------------------------------------------------------
   3. Reset / Base — solo aplica dentro de la landing para no romper el admin
       ni otras páginas del sitio.
   ----------------------------------------------------------------------------- */

/* Asegurar que html y body tengan el fondo cuando estamos en la landing,
   para que no aparezcan franjas blancas si el contenido supera el viewport.
   Targeteamos via la body class .altor-landing que añade functions.php. */
html:has(body.altor-landing),
body.altor-landing,
body.altor-landing-body {
	background: var(--bg);
	min-height: 100%;
}

/* Fallback para navegadores sin :has() — se aplica vía clase del template */
.altor-landing-body {
	background: var(--bg);
	min-height: 100vh;
}

.altor-landing-body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden; /* protege de scroll lateral por blurs/ambient */
}

.altor-landing-body *,
.altor-landing-body *::before,
.altor-landing-body *::after {
	box-sizing: border-box;
}

.altor-landing-body img,
.altor-landing-body svg {
	max-width: 100%;
	height: auto;
	display: block;
}

.altor-landing-body a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.22s var(--ease-out);
}
.altor-landing-body a:hover {
	color: var(--text);
}

/* -----------------------------------------------------------------------------
   4. Tipografía
   ----------------------------------------------------------------------------- */
.altor-landing-body h1,
.altor-landing-body h2,
.altor-landing-body h3,
.altor-landing-body h4,
.altor-landing-body h5,
.altor-landing-body h6 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.12;
	margin: 0 0 0.5em;
	color: inherit;
	text-wrap: balance;
}

.altor-landing-body h1 { font-size: clamp(2.25rem, 4.2vw, 4rem); }   /* 36–64 */
.altor-landing-body h2 { font-size: clamp(1.875rem, 3.2vw, 3rem); }  /* 30–48 */
.altor-landing-body h3 { font-weight: 600; font-size: clamp(1.375rem, 2vw, 2rem); } /* 22–32 */
.altor-landing-body h4 { font-weight: 500; font-size: clamp(1.125rem, 1.4vw, 1.375rem); } /* 18–22 */

.altor-landing-body p {
	margin: 0 0 1.2em;
	max-width: 65ch;
}

/* Eyebrow / label sobre las secciones */
.altor-eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}

/* Línea de acento decorativa (encima de H2 normalmente) */
.altor-accent-line {
	display: block;
	width: 40px;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
	margin: 0 0 24px;
	border: 0;
}

/* Acentos de color para titulares partidos */
.altor-text-accent { color: var(--accent); }
.altor-text-teal   { color: var(--teal); }
.altor-text-light  { color: var(--text); }

/* -----------------------------------------------------------------------------
   5. Layout — contenedor y secciones
   ----------------------------------------------------------------------------- */
.altor-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.altor-section {
	padding-block: var(--section-pad-y);
	background: var(--bg);
	color: var(--text);
}

.altor-section--light {
	background: var(--bg-light);
	color: var(--text-dark);
}
.altor-section--light h1,
.altor-section--light h2,
.altor-section--light h3,
.altor-section--light h4 { color: var(--text-dark); }

.altor-section--teal {
	background: var(--bg-teal);
	color: var(--text);
}

.altor-section--dark-2 { background: var(--bg-2); }

@media (max-width: 768px) {
	:root { --section-pad-y: 64px; }
}

/* Grids utilitarios sencillos */
.altor-grid {
	display: grid;
	gap: 24px;
}
.altor-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.altor-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.altor-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.altor-grid--3,
	.altor-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.altor-grid--2,
	.altor-grid--3,
	.altor-grid--4 { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   6. Botones
   ----------------------------------------------------------------------------- */
.altor-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.2px;
	line-height: 1;
	padding: 13px 26px;
	border-radius: var(--r-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.22s var(--ease-out),
	            box-shadow 0.22s var(--ease-out),
	            background-color 0.22s var(--ease-out),
	            color 0.22s var(--ease-out),
	            border-color 0.22s var(--ease-out);
	user-select: none;
}

/* Primario */
.altor-btn--primary {
	background: var(--accent);
	color: var(--white);
}
.altor-btn--primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(240, 74, 35, 0.38);
	color: var(--white);
}

/* Ghost (sobre fondo oscuro) */
.altor-btn--ghost {
	background: transparent;
	color: var(--text);
	border-color: rgba(255, 255, 255, 0.28);
}
.altor-btn--ghost:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* Ghost dark (sobre fondo claro) */
.altor-btn--ghost-dark {
	background: transparent;
	color: var(--text-dark);
	border-color: rgba(23, 35, 43, 0.28);
}
.altor-btn--ghost-dark:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* Nav back: link textual con flecha (no es pill, no es ghost) */
.altor-btn--nav-back {
	background: transparent;
	border: none;
	padding: 0;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color 0.22s var(--ease-out);
}
.altor-btn--nav-back:hover { color: var(--text); }

/* Tamaños */
.altor-btn--lg { padding: 16px 40px; font-size: 0.875rem; letter-spacing: 1px; }

/* -----------------------------------------------------------------------------
   7. Cards / Glass panels
   ----------------------------------------------------------------------------- */
.altor-card {
	background: var(--bg-card);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding: 28px;
}

.altor-card--lg { border-radius: var(--r-lg); padding: 36px; }

/* Card sobre fondo claro */
.altor-section--light .altor-card {
	background: rgba(23, 35, 43, 0.04);
	border-color: var(--border-light);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* -----------------------------------------------------------------------------
   8. Dividers
   ----------------------------------------------------------------------------- */
.altor-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 0;
}
.altor-section--light .altor-divider {
	border-top-color: var(--border-light);
}

/* -----------------------------------------------------------------------------
   9. Animaciones de entrada (scroll reveal)
   Añade clase .altor-reveal al elemento, y .visible cuando entre al viewport
   (usa IntersectionObserver desde tu JS o cualquier librería tipo AOS).
   ----------------------------------------------------------------------------- */
.altor-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--ease-out),
	            transform 0.7s var(--ease-out);
}
.altor-reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

.altor-reveal[data-delay="1"] { transition-delay: 0.08s; }
.altor-reveal[data-delay="2"] { transition-delay: 0.16s; }
.altor-reveal[data-delay="3"] { transition-delay: 0.24s; }
.altor-reveal[data-delay="4"] { transition-delay: 0.32s; }
.altor-reveal[data-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
	.altor-reveal { opacity: 1; transform: none; transition: none; }
	.altor-btn { transition: none; }
	.altor-btn--primary:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   10. Utilidades
   ----------------------------------------------------------------------------- */
.altor-text-center { text-align: center; }
.altor-mt-0 { margin-top: 0; }
.altor-mb-0 { margin-bottom: 0; }
.altor-mb-sm { margin-bottom: 12px; }
.altor-mb-md { margin-bottom: 24px; }
.altor-mb-lg { margin-bottom: 48px; }

/* Stack: separación vertical uniforme entre hijos directos */
.altor-stack > * + * { margin-top: 16px; }
.altor-stack-lg > * + * { margin-top: 32px; }

/* -----------------------------------------------------------------------------
   11. Glow accent (resplandor difuso para destacar elementos)
   ----------------------------------------------------------------------------- */
.altor-glow {
	box-shadow: 0 0 30px rgba(240, 74, 35, 0.15);
}
.altor-glow--strong {
	box-shadow: 0 0 30px rgba(240, 74, 35, 0.35);
}
.altor-glow--teal {
	box-shadow: 0 0 30px rgba(10, 81, 86, 0.3);
}

/* -----------------------------------------------------------------------------
   12. Ambient glows — blobs decorativos de fondo
   Úsalos como divs vacíos al final del <body>. position:fixed, no interactivos.
   ----------------------------------------------------------------------------- */
.altor-ambient {
	position: fixed;
	width: 500px;
	height: 500px;
	max-width: 60vw;
	max-height: 60vw;
	border-radius: 50%;
	filter: blur(120px);
	pointer-events: none;
	z-index: -1;
	opacity: 0.5;
}
.altor-ambient--top-right {
	top: -10%;
	right: -10%;
	background: rgba(240, 74, 35, 0.12);
}
.altor-ambient--bottom-left {
	bottom: -10%;
	left: -10%;
	background: rgba(10, 81, 86, 0.18);
}

@media (max-width: 768px) {
	.altor-ambient { width: 320px; height: 320px; filter: blur(90px); }
}

/* -----------------------------------------------------------------------------
   13. Form-page layout — landing centrada angosta para formularios
   ----------------------------------------------------------------------------- */
.altor-form-page {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	min-height: 100vh; /* mínimo, pero crece con el contenido */
	padding: 60px 24px;
	box-sizing: border-box;
}

.altor-form-page__inner {
	width: 100%;
	max-width: 680px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.altor-form-page__header {
	text-align: center;
	margin-bottom: 48px;
}

/* Logo + acento bajo el wordmark, centrado */
.altor-brand-stack {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
}
.altor-brand-stack__name {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--white);
	line-height: 1;
}
.altor-brand-stack__line {
	width: 40px;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   14. Radio cards — tarjetas seleccionables (tipo "elige tu perfil")
   Estructura HTML esperada:
   <label class="altor-radio-card">
       <input type="radio" name="..." class="altor-radio-card__input">
       <span class="altor-radio-card__body">
           <span class="altor-radio-card__icon"><i class="fa-..."></i></span>
           <span class="altor-radio-card__title">Soy Propietario</span>
           <span class="altor-radio-card__text">...</span>
           <span class="altor-radio-card__check"><i class="fa-solid fa-circle-check"></i></span>
       </span>
   </label>
   ----------------------------------------------------------------------------- */
.altor-radio-card {
	position: relative;
	display: block;
	cursor: pointer;
	height: 100%;
}

.altor-radio-card__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.altor-radio-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 24px;
	border-radius: var(--r-md);
	border: 1.5px solid var(--border);
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 0.25s var(--ease-out),
	            background-color 0.25s var(--ease-out),
	            box-shadow 0.25s var(--ease-out);
}
.altor-radio-card:hover .altor-radio-card__body {
	border-color: rgba(255, 255, 255, 0.2);
}
.altor-radio-card__input:checked + .altor-radio-card__body {
	border-color: var(--accent);
	background: rgba(240, 74, 35, 0.05);
	box-shadow: 0 0 30px rgba(240, 74, 35, 0.15);
}
.altor-radio-card__input:focus-visible + .altor-radio-card__body {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.altor-radio-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.altor-radio-card__input:checked + .altor-radio-card__body .altor-radio-card__icon {
	background: rgba(240, 74, 35, 0.2);
	color: var(--accent);
}

.altor-radio-card__title {
	display: block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--white);
	line-height: 1.2;
	margin-bottom: 4px;
}

.altor-radio-card__text {
	display: block;
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: rgba(240, 244, 245, 0.65);
	line-height: 1.55;
}

.altor-radio-card__check {
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: 1.1rem;
	color: var(--accent);
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.altor-radio-card__input:checked + .altor-radio-card__body .altor-radio-card__check {
	opacity: 1;
	transform: scale(1);
}

/* Grid contenedor de radio cards */
.altor-radio-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 600px) {
	.altor-radio-card-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   15. Form-card footer (separador + botones de navegación)
   ----------------------------------------------------------------------------- */
.altor-form-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	margin-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* -----------------------------------------------------------------------------
   16. Footer meta (badge SSL + copy + links chiquitos)
   ----------------------------------------------------------------------------- */
.altor-meta-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	margin-top: 24px;
}

.altor-ssl-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.altor-ssl-badge i { color: var(--teal); font-size: 0.875rem; }

.altor-meta-footer__copy {
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--muted);
	opacity: 0.6;
	margin: 0;
}

.altor-meta-footer__links {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: center;
}
.altor-meta-footer__links a {
	font-family: var(--font-body);
	font-size: 0.625rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: color 0.22s var(--ease-out);
}
.altor-meta-footer__links a:hover { color: var(--accent); }

/* =============================================================================
   17. FLUENT FORMS PRO — Overrides al design system de ALTOR
   Especificidad: usamos `.altor-landing-body .ff-...` para ganar contra
   los estilos por defecto del plugin sin recurrir a !important.
   Componentes cubiertos: text/email/number/tel, textarea, select, radio,
   checkbox, date picker (flatpickr), file upload, address composite,
   phone (intl-tel-input), labels, helper, errores, multi-step, submit.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   17.0 Tokens locales del form (calculados desde los globales del DS)
   ----------------------------------------------------------------------------- */
.altor-landing-body {
	--ff-bg-input:        rgba(13, 27, 34, 0.6);   /* fondo sólido oscuro translúcido */
	--ff-bg-input-focus:  rgba(13, 27, 34, 0.85);
	--ff-border-input:    rgba(255, 255, 255, 0.12);
	--ff-border-focus:    var(--accent);
	--ff-radius-input:    10px;
	--ff-pad-y:           12px;
	--ff-pad-x:           16px;
	--ff-text:            var(--text);
	--ff-placeholder:     rgba(240, 244, 245, 0.4);
	--ff-label:           rgba(240, 244, 245, 0.85);
	--ff-helper:          rgba(240, 244, 245, 0.5);
	--ff-error:           #ff6b50;
	--ff-error-bg:        rgba(255, 107, 80, 0.08);
}

/* -----------------------------------------------------------------------------
   17.1 Wrapper general del form
   ----------------------------------------------------------------------------- */
.altor-landing-body .fluentform,
.altor-landing-body .frm-fluent-form {
	font-family: var(--font-body);
	color: var(--ff-text);
	max-width: 100%;
	box-sizing: border-box;
}

.altor-landing-body .fluentform *,
.altor-landing-body .frm-fluent-form * {
	box-sizing: border-box;
}

/* Filas internas (FF usa .ff-t-cell para columnas) */
.altor-landing-body .ff-t-container,
.altor-landing-body .ff-el-group {
	margin-bottom: 18px;
}

/* -----------------------------------------------------------------------------
   17.2 Labels y helper text
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-el-input--label label,
.altor-landing-body .ff_t_container label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ff-label);
	margin-bottom: 8px;
	letter-spacing: 0.2px;
}

/* Asterisco de required */
.altor-landing-body .ff-el-is-required.asterisk-right label:after,
.altor-landing-body .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
	content: ' *';
	color: var(--accent);
	font-weight: 700;
}

/* Helper / instrucciones */
.altor-landing-body .ff-el-help-message,
.altor-landing-body .ff-el-tooltip {
	font-size: 0.75rem;
	color: var(--ff-helper);
	margin-top: 6px;
	line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   17.3 Inputs base (text, email, number, tel, url, password, search)
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-el-form-control,
.altor-landing-body input[type="text"].ff-el-form-control,
.altor-landing-body input[type="email"].ff-el-form-control,
.altor-landing-body input[type="number"].ff-el-form-control,
.altor-landing-body input[type="tel"].ff-el-form-control,
.altor-landing-body input[type="url"].ff-el-form-control,
.altor-landing-body input[type="password"].ff-el-form-control,
.altor-landing-body input[type="search"].ff-el-form-control,
.altor-landing-body input[type="date"].ff-el-form-control,
.altor-landing-body textarea.ff-el-form-control,
.altor-landing-body select.ff-el-form-control {
	width: 100%;
	padding: var(--ff-pad-y) var(--ff-pad-x);
	background: var(--ff-bg-input);
	color: var(--ff-text);
	border: 1.5px solid var(--ff-border-input);
	border-radius: var(--ff-radius-input);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	transition: border-color 0.22s var(--ease-out),
	            background-color 0.22s var(--ease-out),
	            box-shadow 0.22s var(--ease-out);
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Placeholder */
.altor-landing-body .ff-el-form-control::placeholder,
.altor-landing-body input.ff-el-form-control::placeholder,
.altor-landing-body textarea.ff-el-form-control::placeholder {
	color: var(--ff-placeholder);
	opacity: 1;
}

/* Hover */
.altor-landing-body .ff-el-form-control:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

/* Focus */
.altor-landing-body .ff-el-form-control:focus,
.altor-landing-body .ff-el-form-control:focus-visible {
	background: var(--ff-bg-input-focus);
	border-color: var(--ff-border-focus);
	box-shadow: 0 0 0 3px rgba(240, 74, 35, 0.18);
}

/* Autofill (Chrome rellena con su amarillo horrible) */
.altor-landing-body .ff-el-form-control:-webkit-autofill,
.altor-landing-body .ff-el-form-control:-webkit-autofill:hover,
.altor-landing-body .ff-el-form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ff-text);
	-webkit-box-shadow: 0 0 0 1000px var(--ff-bg-input-focus) inset;
	caret-color: var(--ff-text);
	transition: background-color 99999s ease-out;
}

/* Textarea: alto cómodo */
.altor-landing-body textarea.ff-el-form-control {
	min-height: 110px;
	resize: vertical;
	font-family: var(--font-body);
}

/* Number: ocultar spinners feos */
.altor-landing-body input[type="number"].ff-el-form-control {
	-moz-appearance: textfield;
}
.altor-landing-body input[type="number"].ff-el-form-control::-webkit-outer-spin-button,
.altor-landing-body input[type="number"].ff-el-form-control::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -----------------------------------------------------------------------------
   17.4 Select (dropdown nativo) — flecha custom
   ----------------------------------------------------------------------------- */
.altor-landing-body select.ff-el-form-control {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F0F4F5' stroke-opacity='0.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-right: 40px;
	cursor: pointer;
}

/* Options del dropdown nativo (limitado, depende del SO) */
.altor-landing-body select.ff-el-form-control option {
	background: var(--bg-2);
	color: var(--text);
}

/* -----------------------------------------------------------------------------
   17.5 Radio buttons y checkboxes (Fluent usa pseudo-elements custom)
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-el-form-check,
.altor-landing-body .ff-el-input--content .ff_item_panel_check_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	cursor: pointer;
}

.altor-landing-body .ff-el-form-check-label,
.altor-landing-body .ff_item_panel_check_item label {
	color: var(--ff-text);
	font-size: 0.9375rem;
	font-weight: 400;
	cursor: pointer;
	margin: 0;
	line-height: 1.4;
}

/* Estado nativo: input oculto, custom box pintado */
.altor-landing-body .ff-el-form-check-input,
.altor-landing-body input[type="radio"].ff-el-form-check-input,
.altor-landing-body input[type="checkbox"].ff-el-form-check-input {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background: var(--ff-bg-input);
	border: 1.5px solid var(--ff-border-input);
	margin: 0;
	cursor: pointer;
	transition: border-color 0.22s var(--ease-out),
	            background-color 0.22s var(--ease-out);
	flex-shrink: 0;
	position: relative;
}

.altor-landing-body input[type="radio"].ff-el-form-check-input {
	border-radius: 50%;
}
.altor-landing-body input[type="checkbox"].ff-el-form-check-input {
	border-radius: 5px;
}

.altor-landing-body input[type="radio"].ff-el-form-check-input:hover,
.altor-landing-body input[type="checkbox"].ff-el-form-check-input:hover {
	border-color: rgba(255, 255, 255, 0.3);
}

/* Checked: radio (puntito naranja) */
.altor-landing-body input[type="radio"].ff-el-form-check-input:checked {
	border-color: var(--accent);
	background: var(--ff-bg-input);
}
.altor-landing-body input[type="radio"].ff-el-form-check-input:checked::after {
	content: '';
	position: absolute;
	inset: 3px;
	background: var(--accent);
	border-radius: 50%;
}

/* Checked: checkbox (cuadro naranja con palomita) */
.altor-landing-body input[type="checkbox"].ff-el-form-check-input:checked {
	background-color: var(--accent);
	border-color: var(--accent);
}
.altor-landing-body input[type="checkbox"].ff-el-form-check-input:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid var(--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Focus visible accesibilidad */
.altor-landing-body input[type="radio"].ff-el-form-check-input:focus-visible,
.altor-landing-body input[type="checkbox"].ff-el-form-check-input:focus-visible {
	box-shadow: 0 0 0 3px rgba(240, 74, 35, 0.25);
}

/* -----------------------------------------------------------------------------
   17.6 Address composite (grupo de 5-6 inputs: dirección, ciudad, estado, etc.)
   FF lo renderiza con .ff-address y subgrupos. Heredan estilos base de input;
   aquí solo cuidamos el grid y los sub-labels.
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-address {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}
.altor-landing-body .ff-address > .ff-t-cell {
	width: 100%;
}
.altor-landing-body .ff-address .ff-el-input--label label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--ff-helper);
	margin-bottom: 6px;
}

@media (max-width: 600px) {
	.altor-landing-body .ff-address { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   17.7 Phone input (intl-tel-input)
   ----------------------------------------------------------------------------- */
.altor-landing-body .iti {
	width: 100%;
}
.altor-landing-body .iti__flag-container {
	background: transparent;
}
.altor-landing-body .iti--separate-dial-code .iti__selected-flag {
	background: var(--ff-bg-input);
	border: 1.5px solid var(--ff-border-input);
	border-right: none;
	border-radius: var(--ff-radius-input) 0 0 var(--ff-radius-input);
	padding: 0 12px;
}
.altor-landing-body .iti--separate-dial-code .iti__selected-dial-code {
	color: var(--ff-text);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	margin-left: 6px;
}
.altor-landing-body .iti__arrow {
	border-top-color: rgba(255, 255, 255, 0.5);
}
.altor-landing-body .iti--allow-dropdown input.ff-el-form-control,
.altor-landing-body .iti--separate-dial-code input.ff-el-form-control {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Dropdown de países (FF lo inyecta al body, no al wrapper).
   Targeteamos global pero solo cuando el dropdown está activo. */
.iti__country-list {
	background: var(--bg-2, #0d1b22);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	color: var(--text, #F0F4F5);
	font-family: 'Montserrat', sans-serif;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.iti__country:hover,
.iti__country.iti__highlight {
	background: rgba(240, 74, 35, 0.12);
}
.iti__divider {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* -----------------------------------------------------------------------------
   17.8 Date picker (flatpickr) — el calendario también va al <body>
   ----------------------------------------------------------------------------- */
.flatpickr-calendar {
	background: var(--bg-2, #0d1b22);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
	font-family: 'Montserrat', sans-serif;
	color: var(--text, #F0F4F5);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { display: none; }

.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	color: var(--text, #F0F4F5);
	background: transparent;
	fill: var(--text, #F0F4F5);
}

.flatpickr-monthDropdown-months {
	background: var(--bg-2, #0d1b22) !important;
}
.flatpickr-monthDropdown-month {
	background: var(--bg-2, #0d1b22);
	color: var(--text, #F0F4F5);
}

.flatpickr-prev-month,
.flatpickr-next-month {
	color: var(--text, #F0F4F5);
	fill: var(--text, #F0F4F5);
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
	fill: #F04A23;
}

.flatpickr-weekdays,
.flatpickr-weekday {
	background: transparent;
	color: rgba(240, 244, 245, 0.5);
	font-weight: 600;
}

.flatpickr-day {
	color: var(--text, #F0F4F5);
	border-radius: 8px;
	border: none;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
	background: rgba(240, 74, 35, 0.18);
	border-color: transparent;
}
.flatpickr-day.today {
	border: 1px solid #F04A23;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: #F04A23;
	border-color: #F04A23;
	color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: rgba(240, 244, 245, 0.25);
}

/* -----------------------------------------------------------------------------
   17.9 File upload
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-uploader-wrapper,
.altor-landing-body .ff_file_upload_holder {
	background: var(--ff-bg-input);
	border: 1.5px dashed var(--ff-border-input);
	border-radius: var(--ff-radius-input);
	padding: 28px 20px;
	text-align: center;
	transition: border-color 0.22s var(--ease-out),
	            background-color 0.22s var(--ease-out);
}
.altor-landing-body .ff-uploader-wrapper:hover,
.altor-landing-body .ff_file_upload_holder:hover {
	border-color: var(--accent);
	background: rgba(240, 74, 35, 0.04);
}

.altor-landing-body .ff-upload-btn,
.altor-landing-body .ff_upload_btn,
.altor-landing-body .ff-el-form-control[type="file"] + .ff-upload-preview {
	color: var(--ff-text);
	font-family: var(--font-body);
}

.altor-landing-body .ff-uploader-wrapper p,
.altor-landing-body .ff_file_upload_holder p {
	color: var(--ff-helper);
	font-size: 0.8125rem;
	margin: 6px 0 0;
}

/* Botón explícito de upload (algunas versiones lo renderizan) */
.altor-landing-body .ff-btn-upload,
.altor-landing-body button.ff_upload_btn {
	background: rgba(255, 255, 255, 0.08);
	color: var(--ff-text);
	border: 1px solid var(--ff-border-input);
	border-radius: var(--r-pill);
	padding: 8px 18px;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.22s var(--ease-out);
}
.altor-landing-body .ff-btn-upload:hover,
.altor-landing-body button.ff_upload_btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* Preview de archivo subido */
.altor-landing-body .ff-upload-preview {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 8px;
	padding: 8px 12px;
	margin-top: 10px;
	color: var(--ff-text);
	font-size: 0.8125rem;
}

/* -----------------------------------------------------------------------------
   17.10 Mensajes de error y validación
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-el-is-error .ff-el-form-control,
.altor-landing-body .error.ff-el-form-control {
	border-color: var(--ff-error);
	background: var(--ff-error-bg);
}
.altor-landing-body .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: 0 0 0 3px rgba(255, 107, 80, 0.2);
}

.altor-landing-body .error,
.altor-landing-body .ff-el-input--content .text-danger,
.altor-landing-body .fluentform .error {
	color: var(--ff-error);
	font-size: 0.75rem;
	margin-top: 6px;
	line-height: 1.4;
}

/* Mensaje global del form (success / error) */
.altor-landing-body .ff-message-success,
.altor-landing-body .ff_form_success {
	background: rgba(10, 81, 86, 0.2);
	border: 1px solid var(--teal);
	border-radius: var(--r-md);
	padding: 16px 20px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 0.9375rem;
}

.altor-landing-body .ff-errors-in-stack,
.altor-landing-body .ff-message-failed {
	background: rgba(255, 107, 80, 0.1);
	border: 1px solid var(--ff-error);
	border-radius: var(--r-md);
	padding: 14px 18px;
	color: var(--ff-error);
	font-size: 0.875rem;
	margin-bottom: 16px;
}

/* -----------------------------------------------------------------------------
   17.11 Multi-step: progress bar + botones prev/next
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-step-header,
.altor-landing-body .ff-step-titles {
	margin-bottom: 28px;
}

/* Progress bar (la "fill" que se llena conforme avanzas) */
.altor-landing-body .ff_progress_bar,
.altor-landing-body .ff-step-progress {
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--r-pill);
	height: 6px;
	overflow: hidden;
	margin-bottom: 8px;
}
.altor-landing-body .ff_progress_bar .ff_progress_status,
.altor-landing-body .ff-step-progress .ff-progress-fill,
.altor-landing-body .ff_progress_bar > div {
	background: var(--accent);
	height: 100%;
	border-radius: var(--r-pill);
	transition: width 0.4s var(--ease-out);
}

/* Texto del progress (ej: "33% completado") */
.altor-landing-body .ff_progress_label,
.altor-landing-body .ff-step-progress-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ff-helper);
	text-align: right;
	letter-spacing: 0.5px;
}

/* Step titles (si están activos) */
.altor-landing-body .ff-step-titles {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	list-style: none;
	padding: 0;
}
.altor-landing-body .ff-step-titles li {
	flex: 1;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--ff-helper);
	text-align: center;
	padding: 8px 4px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.08);
	transition: color 0.3s, border-color 0.3s;
}
.altor-landing-body .ff-step-titles li.ff_active {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
.altor-landing-body .ff-step-titles li.ff_completed {
	color: var(--text);
	border-bottom-color: rgba(240, 74, 35, 0.4);
}

/* Contenedor de botones prev/next/submit del step */
.altor-landing-body .step-nav,
.altor-landing-body .ff_step_nav,
.altor-landing-body .ff-el-form-control + .step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* -----------------------------------------------------------------------------
   17.12 Submit button + botones prev/next del step
   Forzamos el look del .altor-btn--primary independientemente de los colores
   que el usuario haya puesto en el panel del builder.
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-btn,
.altor-landing-body .ff-btn-submit,
.altor-landing-body .step-nav button,
.altor-landing-body .ff_step_btn,
.altor-landing-body button.ff-btn-next,
.altor-landing-body button.ff-btn-prev,
.altor-landing-body button[type="submit"].ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.5px;
	line-height: 1;
	padding: 14px 28px;
	border-radius: var(--r-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.22s var(--ease-out),
	            box-shadow 0.22s var(--ease-out),
	            background-color 0.22s var(--ease-out),
	            color 0.22s var(--ease-out),
	            border-color 0.22s var(--ease-out);
	background: var(--accent);
	color: var(--white);
}
.altor-landing-body .ff-btn:hover,
.altor-landing-body .ff-btn-submit:hover,
.altor-landing-body button[type="submit"].ff-btn:hover,
.altor-landing-body button.ff-btn-next:hover,
.altor-landing-body .ff_step_btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(240, 74, 35, 0.38);
	color: var(--white);
}

/* Variante "previous": ghost en lugar de pill naranja */
.altor-landing-body button.ff-btn-prev,
.altor-landing-body .ff_step_btn.ff_btn_back {
	background: transparent;
	color: var(--text);
	border-color: rgba(255, 255, 255, 0.2);
}
.altor-landing-body button.ff-btn-prev:hover,
.altor-landing-body .ff_step_btn.ff_btn_back:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--accent);
	color: var(--accent);
	background: transparent;
}

/* Estado loading del submit (FF agrega clase mientras envía) */
.altor-landing-body .ff-btn.ff-working,
.altor-landing-body .ff-btn-submit.ff-working {
	opacity: 0.7;
	cursor: wait;
	transform: none;
}

/* -----------------------------------------------------------------------------
   17.13 Section breaks / títulos dentro del form
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-el-section-break,
.altor-landing-body .ff_section_break_title {
	margin: 32px 0 8px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.altor-landing-body .ff-el-section-break h3,
.altor-landing-body .ff_section_break_title h3 {
	font-family: var(--font-head);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text);
	margin: 0 0 4px;
}
.altor-landing-body .ff-el-section-break p,
.altor-landing-body .ff_section_break_desc {
	font-size: 0.875rem;
	color: var(--ff-helper);
	margin: 0;
}

/* -----------------------------------------------------------------------------
   17.14 Estados disabled / readonly
   ----------------------------------------------------------------------------- */
.altor-landing-body .ff-el-form-control:disabled,
.altor-landing-body .ff-el-form-control[readonly] {
	opacity: 0.55;
	cursor: not-allowed;
	background: rgba(13, 27, 34, 0.4);
}