/**
 * Componentes reutilizables.
 *
 * CONVENCIÓN DE NOMBRES: BEM con prefijo `hec-`.
 *   .hec-bloque
 *   .hec-bloque__elemento
 *   .hec-bloque--modificador
 *
 * REGLAS:
 *   1. Un componente por bloque, separado por un comentario de cabecera.
 *   2. Nunca valores literales: siempre tokens de variables.css.
 *   3. Nada de !important salvo justificación escrita en el propio comentario.
 *   4. Cada componente debe documentar su HTML esperado.
 */

/* =========================================================================
 *  BOTÓN
 *
 *  <a class="hec-btn hec-btn--gradient">Etiqueta</a>
 *
 *  Modificadores de aspecto: --gradient (marca), --dark (negro sólido),
 *  --light (blanco sólido), --outline-light (borde blanco sobre oscuro).
 *  Modificadores de tamaño:  --xs (32px), --sm (37px), por defecto 50px.
 *
 *  NOTA DE ACCESIBILIDAD: el texto blanco sobre --gradient da 2.5:1, por
 *  debajo de WCAG AA. Es una excepción aceptada por el cliente para mantener
 *  la fidelidad al diseño (ver CLAUDE.md → Decisiones tomadas). Se compensa
 *  con foco visible reforzado y área táctil amplia, no alterando el color.
 * ======================================================================= */

.hec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 50px;
	padding-inline: var(--sp-6);
	border: 0;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out),
		opacity var(--dur-fast) var(--ease-out);
}

.hec-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.hec-btn:active {
	transform: translateY(0);
}

.hec-btn--gradient {
	background-image: var(--grad-brand);
	color: var(--c-inverse);
}

.hec-btn--dark {
	background-color: var(--c-black);
	color: var(--c-inverse);
}

.hec-btn--light {
	background-color: var(--c-white);
	color: var(--c-ink);
}

.hec-btn--outline-light {
	background-color: transparent;
	color: var(--c-inverse);
	box-shadow: inset 0 0 0 var(--border-w) var(--c-inverse);
}

.hec-btn--outline-light:hover {
	box-shadow: inset 0 0 0 var(--border-w) var(--c-inverse), var(--shadow-md);
}

/* Contorno sobre fondo claro (hero de Persona Natural). En el diseño va en
 * caja normal aunque acompañe a un --lg en mayúsculas. */
.hec-btn--outline-dark {
	background-color: transparent;
	color: var(--c-ink);
	box-shadow: inset 0 0 0 calc(var(--border-w) * 2) var(--c-ink);
	text-transform: none;
	letter-spacing: 0;
}

.hec-btn--outline-dark:hover {
	box-shadow: inset 0 0 0 calc(var(--border-w) * 2) var(--c-ink), var(--shadow-md);
}

/* Botón de tarjeta del hero partido: rincón más redondo, dos líneas. */
.hec-btn--card {
	min-height: 86px;
	width: 164px;
	padding-inline: var(--sp-4);
	border-radius: var(--radius-md);
	line-height: 1.3;
	text-align: center;
	white-space: normal;
}

/* Persona Natural: el hero quedó con un solo botón (el del asesor). Se centra
 * en el panel (V1 y V2) y en V1 se reduce de tarjeta a botón normal. */
.hec-hero-split__actions.e-con {
	--justify-content: center;
	justify-content: center;
}

body:not(.hec-v2) .hec-hero-split .hec-btn--card {
	width: auto;
	min-height: 56px;
	padding-inline: var(--sp-8, 40px);
	white-space: nowrap;
}

.hec-btn--block {
	display: flex;
	width: 100%;
}

/* Tamaños reducidos: los dos botones de cabecera del diseño. */
.hec-btn--sm {
	min-height: 37px;
	padding-inline: var(--sp-5);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
}

.hec-btn--xs {
	min-height: 32px;
	padding-inline: var(--sp-4);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Botón grande de la composición móvil: alto, ancho completo y en mayúsculas. */
.hec-btn--lg {
	min-height: 68px;
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* El contorno oscuro va en caja normal también en tamaño grande: --lg está
 * definido después y ganaría el empate sin esta regla combinada. */
.hec-btn--outline-dark.hec-btn--lg {
	text-transform: none;
	letter-spacing: 0;
}

/* =========================================================================
 *  ANTETÍTULO
 *
 *  <p class="hec-eyebrow">Renault Renting para empresas</p>
 * ======================================================================= */

.hec-eyebrow {
	margin: 0;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-accent-deep);
}

/* Variante en coral de marca (Persona Natural). */
.hec-eyebrow--accent {
	color: var(--c-accent-end);
}

/* =========================================================================
 *  HERO
 *
 *  Escritorio (D1): dos columnas de 564px con separación de 24px, es decir
 *  6 + 6 del grid de 12. Móvil (M1): una columna con la imagen debajo.
 *
 *  Las medidas exactas del diseño se declaran como propiedades locales del
 *  componente en lugar de dispersarse por las reglas: siguen siendo tokens,
 *  pero de alcance local, porque solo esta sección las usa.
 * ======================================================================= */

.hec-hero {
	background-color: var(--c-cream);
}

/* --- Composición de escritorio --- */

/**
 * Los valores en píxeles de este bloque son las medidas literales del diseño,
 * verificadas comparando capturas contra el PNG a escala @2x. Se declaran como
 * propiedades locales, no sueltas por las reglas, para que sigan siendo un
 * único punto de ajuste por sección.
 *
 * SOBRE EL LAYOUT: el relleno de sección y la disposición en columnas los
 * gobierna Elementor desde los ajustes del contenedor (ver
 * exports/templates/home.json), porque su CSS por elemento gana a cualquier
 * clase. Lo que queda aquí actúa como respaldo para que el componente siga
 * siendo correcto fuera de Elementor —por ejemplo en snippets/hero.html— y
 * para que el diseño no dependa del constructor.
 */
.hec-hero--desktop {
	--hero-pad-start: 81px;
	--hero-pad-end: 120px;
	--hero-gap-title: 13px;
	--hero-gap-lead: 25px;
	--hero-gap-actions: 39px;
	--hero-gap-trust: 48px;
	--hero-pad-trust: 32px;

	padding-block: var(--hero-pad-start) var(--hero-pad-end);
}

.hec-hero__title {
	margin-block: var(--hero-gap-title, var(--sp-2)) 0;
}

/* El interlineado del párrafo de entrada es más suelto que el del cuerpo
 * general: 29.75px sobre 18px medidos en el diseño. */
.hec-hero__lead {
	margin-block: var(--hero-gap-lead, var(--sp-7)) 0;
	max-width: 46ch;
	font-size: var(--fs-lead);
	line-height: 1.65;
	color: var(--c-body);
}

.hec-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-block-start: var(--hero-gap-actions, var(--sp-8));
}

.hec-hero__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.hec-hero__media img {
	width: 100%;
	height: auto;
}

/* --- Composición móvil --- */

.hec-hero--mobile {
	--hero-pad-start: 44px;
	--hero-pad-end: 26px;
	--hero-gap-title: 13px;
	--hero-gap-lead: 28px;
	--hero-gap-actions: 40px;
	--hero-gap-media: 36px;

	padding-block: var(--hero-pad-start) var(--hero-pad-end);
}

.hec-hero--mobile .hec-hero__lead {
	margin-block-start: var(--sp-7);
}

.hec-hero--mobile .hec-hero__actions {
	margin-block-start: var(--sp-8);
}

.hec-hero--mobile .hec-hero__media {
	margin-block-start: var(--sp-8);
}

/* =========================================================================
 *  ENCABEZADO DE SECCIÓN
 *
 *  <div class="hec-section-head hec-section-head--center">
 *    <h2 class="hec-section-head__title">…</h2>
 *    <p class="hec-section-head__sub">…</p>
 *  </div>
 * ======================================================================= */

.hec-section-head__title {
	margin: 0;
}

.hec-section-head--center {
	text-align: center;
}

/* Los anchos máximos son los que producen el mismo reparto de líneas que el
 * diseño: el titular en dos líneas y el subtítulo en dos. */
.hec-section-head--center .hec-section-head__title {
	max-width: var(--head-title-max, 900px);
	margin-inline: auto;
}

.hec-section-head__sub {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-body);
}

.hec-section-head--center .hec-section-head__sub {
	max-width: var(--head-sub-max, 640px);
	margin-inline: auto;
}

/* =========================================================================
 *  TARJETA
 *
 *  <div class="hec-card">
 *    <span class="hec-card__icon">…</span>
 *    <h3 class="hec-card__title">…</h3>
 *    <p class="hec-card__text">…</p>
 *  </div>
 *
 *  Variantes: --dark (fondo negro, la destacada de la composición móvil),
 *  --tile (el icono pasa de trazo suelto a cuadro con gradiente).
 * ======================================================================= */

.hec-card {
	background-color: var(--c-white);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-sm);
	padding: var(--card-pad, var(--sp-7));
}

.hec-card--dark {
	background-color: var(--c-black);
	border-color: var(--c-black);
	color: var(--c-inverse-soft);
}

/* =========================================================================
 *  SECCIÓN DE BENEFICIOS
 * ======================================================================= */

.hec-benefits {
	background-color: var(--c-cream-alt);
}

.hec-benefits--desktop {
	--card-pad: 32px;
	--card-gap-title: 13px;
	--card-gap-text: 22px;
}

.hec-benefits--mobile {
	--card-pad: 28px;
	--card-gap-title: 12px;
	--card-gap-text: 20px;

	background-color: var(--c-cream);
}

/* =========================================================================
 *  FEATURE
 *
 *  Icono en cuadro con gradiente a la izquierda y texto a la derecha.
 *
 *  <div class="hec-feature">
 *    <span class="hec-card__icon hec-card__icon--tile">…</span>
 *    <div class="hec-feature__body">
 *      <h3 class="hec-feature__title">…</h3>
 *      <p class="hec-feature__text">…</p>
 *    </div>
 *  </div>
 * ======================================================================= */

.hec-solution {
	background-color: var(--c-cream);
}

/* =========================================================================
 *  PROCESO
 *
 *  Dos disposiciones muy distintas para el mismo concepto:
 *
 *  --horizontal (D4): cinco pasos en fila sobre banda negra, con el número
 *    en bronce y un guion que los enlaza.
 *  --timeline (M4): tres pasos apilados con círculo numerado y una línea
 *    vertical que los une.
 * ======================================================================= */

.hec-process--dark {
	background-color: var(--c-black);
}

.hec-process--light {
	background-color: var(--c-cream-alt);
}

/* --- Paso horizontal --- */

.hec-step__num {
	position: relative;
	margin: 0;
	font-size: var(--fs-number);
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--c-bronze);
}

/* Guion que enlaza un paso con el anterior. El primero no lo lleva. */
.hec-step--linked .hec-step__num::before {
	content: "";
	position: absolute;
	inset-inline-end: calc(100% + 14px);
	inset-block-start: 50%;
	width: 26px;
	height: 2px;
	background-color: var(--c-bronze);
	opacity: 0.55;
}

.hec-step__title {
	margin-block: var(--step-gap-title, 29px) 0;
	font-size: 1.125rem; /* 18px */
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
	color: var(--c-inverse);
}

.hec-step__text {
	margin-block: var(--step-gap-text, 21px) 0;
	font-size: 0.9375rem; /* 15px */
	line-height: 1.6;
	color: var(--c-inverse-soft);
}

/* --- Paso en línea de tiempo --- */

/* En la línea de tiempo el título va alineado con el círculo, no separado como
 * en la disposición horizontal. */
.hec-step--timeline {
	--step-gap-title: 0px;
	--step-gap-text: 12px;

	position: relative;
}

.hec-step--timeline .hec-step__title,
.hec-step--timeline .hec-step__text {
	color: var(--c-ink);
}

.hec-step--timeline .hec-step__text {
	color: var(--c-body);
}

/* Círculo numerado. */
.hec-step__bullet {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill);
	background-color: var(--c-black);
	color: var(--c-inverse);
	font-size: var(--fs-number);
	font-weight: var(--fw-medium);
	line-height: 1;
}

/**
 * Línea que une los círculos: un solo trazo continuo dibujado por la pila,
 * que pasa por detrás de los círculos (opacos) y sigue hasta la altura del
 * último texto, como en el diseño.
 *
 * No se dibuja desde cada círculo porque Elementor da `position: relative` a
 * cada widget, y cualquier pseudoelemento del círculo queda encerrado en sus
 * 48px: eso dejaba muñones sueltos en vez de una línea.
 */
.hec-process__stack {
	position: relative;
}

.hec-process__stack::before {
	content: "";
	position: absolute;
	inset-block: var(--sp-6) 14px;
	inset-inline-start: 23px;
	width: 2px;
	background-color: var(--c-border);
}

/* =========================================================================
 *  BARRA DE GRADIENTE
 *
 *  Franja de 6px que separa el formulario del cierre. Es decorativa: no lleva
 *  texto ni papel semántico, por eso es un contenedor vacío y no un <hr>.
 * ======================================================================= */

.hec-gradientbar {
	height: 6px;
	background-image: var(--grad-brand);
}

/* =========================================================================
 *  CIERRE
 * ======================================================================= */

.hec-cta {
	background-color: var(--c-black);
	text-align: center;
}

.hec-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-6);
}

.hec-cta .hec-btn {
	min-height: 70px;
	padding-inline: var(--sp-10);
	font-size: var(--fs-lead);
}

/* =========================================================================
 *  BARRA DE ACCIÓN FIJA (composición móvil)
 *
 *  Aparece al dejar atrás el hero y acompaña el resto del recorrido.
 *  El resplandor la separa del contenido sin necesidad de una línea.
 * ======================================================================= */

/**
 * CTA final del pie móvil (M9). Botón estático en el flujo del pie —el diseño
 * no lo mueve con el scroll—, en píldora, con el resplandor de marca y su
 * flecha. La altura es la del botón por defecto (50px), no la de --lg.
 */
.hec-footer__cta {
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-glow);
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* El botón lleva su propia flecha, igual que el enlace de las tarjetas. */
.hec-footer__cta::after {
	content: "";
	width: 18px;
	height: 10px;
	margin-inline-start: auto;
	background-color: currentcolor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
}

/* =========================================================================
 *  RESPALDO
 *
 *  Dos columnas: bloques de icono a la izquierda y una foto enmarcada,
 *  ligeramente girada, con un resplandor cálido detrás.
 * ======================================================================= */

.hec-backing {
	background-color: var(--c-cream-alt);
}

/* Bloque de icono suelto, sin cuadro: el icono va alineado con el título. */
.hec-backing__item {
	display: flex;
	gap: var(--sp-5);
}

/**
 * La foto lleva un marco blanco y un giro leve. El resplandor de detrás es un
 * degradado radial en un pseudoelemento: no requiere imagen ni desenfoque, así
 * que no cuesta ni una petición ni repintado en scroll.
 */
.hec-backing__media {
	position: relative;
	margin: 0;
	padding: 14px;
	background-color: var(--c-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	transform: rotate(2deg);
}

.hec-backing__media::before {
	content: "";
	position: absolute;
	inset: -18% -12% 20% -12%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		rgb(255 126 60 / 0.42) 0%,
		rgb(255 126 60 / 0.12) 45%,
		transparent 70%
	);
}

.hec-backing__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

/* =========================================================================
 *  TARJETA DE IMAGEN
 *
 *  Foto de fondo con velo oscuro y el texto encima, abajo a la izquierda.
 *
 *  OJO: ya no es el `<a>` con un `<img>` dentro que hubo al principio. La
 *  sección se genera desde home.json y Elementor la emite como contenedor flex
 *  con la foto puesta de fondo, así que el alto, el velo y la posición del
 *  contenido se resuelven en elementor.css. Aquí queda solo lo que no depende
 *  de Elementor.
 *
 *  NO declarar `display` en esta regla. Elementor trae
 *  `.e-con { display: var(--display) }`, que tiene la misma especificidad
 *  (0,1,0), y esta hoja se carga después: cualquier `display` declarado aquí
 *  gana el desempate por orden y convierte la tarjeta en una caja de bloque.
 *  Eso deja sin efecto el `justify-content: flex-end` y el margen automático
 *  de elementor.css —ambos solo actúan sobre contenedores flex— y el texto se
 *  sube al borde superior. Ya ocurrió una vez.
 * ======================================================================= */

.hec-imgcard {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	text-decoration: none;
	aspect-ratio: 564 / 384;
}

/**
 * Velo que garantiza la legibilidad del texto sobre cualquier foto.
 * Es más denso abajo, que es donde se apoya el contenido.
 */
.hec-imgcard::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		rgb(0 0 0 / 0.78) 0%,
		rgb(0 0 0 / 0.45) 38%,
		rgb(0 0 0 / 0.05) 70%
	);
}

.hec-imgcard__title {
	font-size: var(--fs-h3);
	line-height: var(--lh-title);
}

.hec-imgcard__text {
	max-width: 34ch;
	font-size: var(--fs-body);
	line-height: 1.5;
}

/* =========================================================================
 *  ENLACE CON FLECHA
 * ======================================================================= */

.hec-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-block-start: var(--sp-3);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--c-accent-start);
	text-decoration: none;
}

/* El boton de paso siguiente del formulario lleva la misma flecha en el diseno,
 * asi que comparte la regla en vez de repetir la mascara. */
.hec-link-arrow::after,
.cc-form__next::after {
	content: "";
	width: 18px;
	height: 10px;
	background-color: currentcolor;
	transition: transform var(--dur-fast) var(--ease-out);
	/* Flecha dibujada con una máscara: hereda el color y escala sin perder nitidez. */
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
}

.hec-imgcard:hover .hec-link-arrow::after {
	transform: translateX(4px);
}

/* =========================================================================
 *  LISTA DE SOLUCIONES (composición móvil)
 * ======================================================================= */

.hec-solutions--dark {
	background-color: var(--c-black);
}

.hec-listitem {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-5) var(--sp-6);
	border: var(--border-w) solid var(--c-border-inv);
	border-radius: var(--radius-md);
	background-color: rgb(255 255 255 / 0.03);
	color: var(--c-inverse);
	font-size: var(--fs-lead);
	font-weight: var(--fw-bold);
	text-decoration: none;
}

/* =========================================================================
 *  CAMPO DE FORMULARIO
 *
 *  <p class="hec-field">
 *    <label class="hec-field__label">…</label>
 *    <input class="hec-field__control">
 *  </p>
 * ======================================================================= */

.hec-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
}

/* 16px medidos sobre el diseño: «Razón Social» ocupa 97px de ancho, que a 15px
 * salían 90. */
.hec-field__label {
	font-size: 1rem;
	/* La caja de línea mide 25px en el diseño; heredada salía de 17 y el campo
	 * subía 8px respecto a la maqueta. */
	line-height: var(--lh-body);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
}

/**
 * El selector lleva el tipo de elemento a proposito, no es redundante.
 *
 * El reset.css del tema padre estiliza los campos con `input[type="text"]`,
 * `input[type="email"]` y compania: especificidad (0,1,1), con borde #666 y
 * 3px de radio. Una clase suelta es (0,1,0) y pierde, asi que los campos
 * salian grises y casi rectos en lugar del borde rosa y los 8px del diseno.
 *
 * Cualificando con el tipo de elemento empatamos en especificidad y decide el
 * orden de carga, que functions.php ya garantiza a nuestro favor declarando la
 * dependencia entre hojas. Es la misma estrategia que usa el resto del tema en
 * lugar de inflar selectores o recurrir a !important.
 */
input.hec-field__control,
select.hec-field__control,
textarea.hec-field__control {
	width: 100%;
	/* 48px, medidos borde a borde sobre el diseño. Sigue por encima de los 44px
	 * de área táctil mínima. */
	min-height: 48px;
	padding-inline: var(--sp-4);
	background-color: var(--c-white);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--fs-body);
	color: var(--c-ink);
}

.hec-field__control::placeholder {
	color: var(--c-body);
	opacity: 0.65;
}

/* La flecha del desplegable se dibuja aquí para no depender del estilo nativo,
 * que cambia de un sistema a otro. */
select.hec-field__control {
	appearance: none;
	padding-inline-end: var(--sp-8);
	background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
		linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* =========================================================================
 *  CASILLA DE VERIFICACIÓN
 * ======================================================================= */

.hec-check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3);
	margin: 0;
}

.hec-check__input {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--c-accent-start);
}

.hec-check__label {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--c-body);
}

.hec-check .hec-field__error {
	grid-column: 1 / -1;
}

/* =========================================================================
 *  FORMULARIO DE PROPUESTA
 *
 *  Marcado generado por CompanyCore\Elementor\Widgets\Lead_Form.
 * ======================================================================= */

.cc-form {
	background-color: var(--c-white);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
}

/* La trampa para bots se saca de la vista sin usar display:none, que algunos
 * rellenadores automáticos detectan y saltan. */
.cc-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* --- Pestañas de paso --- */

.cc-form__tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-block-end: var(--border-w) solid var(--c-border);
}

/* 16px arriba y abajo: en el diseño la pestaña mide 57px de alto y la caja de
 * texto ocupa 25, así que el relleno es 16 por lado, no 20. */
.cc-form__tab {
	padding-block: var(--sp-4);
	border: 0;
	border-inline-start: var(--border-w) solid var(--c-border);
	background-color: var(--c-cream-alt);
	font-family: inherit;
	font-size: var(--fs-body);
	color: var(--c-body);
	cursor: pointer;
}

.cc-form__tab:first-child {
	border-inline-start: 0;
	border-start-start-radius: var(--radius-lg);
}

.cc-form__tab:last-child {
	border-start-end-radius: var(--radius-lg);
}

.cc-form__tab[aria-selected="true"] {
	background-color: var(--c-white);
	color: var(--c-accent-deep);
	font-weight: var(--fw-bold);
}

/* 40px de margen interior, medidos sobre el diseño: del borde de la tarjeta al
 * borde del primer campo hay exactamente 80px a escala @2x. */
.cc-form__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	padding: var(--sp-8);
}

.cc-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-6);
}

.cc-form__panel {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

/**
 * `display: flex` de una clase gana al `display: none` que el navegador aplica
 * a [hidden], porque ese viene de la hoja del agente de usuario. Sin esta regla
 * los pasos ocultos seguirían viéndose, y el atributo dejaría de ser fiable
 * como fuente de verdad del estado.
 */
.cc-form__panel[hidden],
.cc-form__actions [hidden] {
	display: none;
}

.cc-form__actions {
	display: flex;
	gap: var(--sp-4);
}

/* --- Disposición simple --- */

.cc-form--simple {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	padding: 0;
	background: none;
	border: 0;
}

.cc-form--simple .hec-field__label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--fw-regular);
	color: var(--c-body);
}

/* --- Estados --- */

.hec-field__control--area {
	min-height: 120px;
	padding-block: var(--sp-3);
	resize: vertical;
}

.hec-field__error:empty {
	display: none;
}

.hec-field__error {
	font-size: 0.8125rem;
	color: var(--c-error);
}

.hec-field__control[aria-invalid="true"] {
	border-color: var(--c-error);
}

.cc-form__feedback:empty {
	display: none;
}

.cc-form__feedback {
	margin: 0;
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
}

.cc-form__feedback.is-ok {
	background-color: rgb(30 122 69 / 0.1);
	color: var(--c-success);
}

.cc-form__feedback.is-error {
	background-color: rgb(179 38 30 / 0.08);
	color: var(--c-error);
}

.cc-form--steps .cc-form__feedback {
	margin: 0 var(--sp-9) var(--sp-9);
}

/* =========================================================================
 *  SIMULADOR
 *
 *  Marcado generado por el widget CompanyCore\Elementor\Widgets\Simulator.
 *  Aquí vive solo su aspecto: la lógica está en el plugin.
 * ======================================================================= */

.cc-sim {
	border-radius: var(--radius-lg);
}

/* --- Disposición de escritorio --- */

.cc-sim--fleet {
	display: grid;
	grid-template-columns: 1fr 495px;
	gap: 64px;
	padding: 56px;
	background-color: var(--c-panel);
	border: var(--border-w) solid var(--c-border);
}

.cc-sim__title {
	margin: 0;
	font-size: 2.5rem; /* 40px */
	line-height: 1.15;
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
}

.cc-sim__sub {
	margin-block: var(--sp-5) 0;
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-body);
}

.cc-sim__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-6);
	margin-block-start: var(--sp-10);
}

/* --- Panel de resultado --- */

.cc-sim__panel {
	display: flex;
	flex-direction: column;
	padding: 40px;
	background-color: var(--c-black);
	border-radius: var(--radius-md);
}

.cc-sim__badge {
	align-self: flex-start;
	padding: 8px var(--sp-4);
	border-radius: var(--radius-pill);
	background-image: var(--grad-brand);
	color: var(--c-inverse);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.cc-sim__rows {
	margin-block: var(--sp-7) 0;
}

.cc-sim__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: var(--sp-5);
	border-block-end: var(--border-w) solid var(--c-border-inv);
}

.cc-sim__row dt {
	font-size: var(--fs-body);
	color: var(--c-inverse-soft);
}

.cc-sim__row dd {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--c-inverse);
	text-align: end;
}

.cc-sim__notice {
	margin-block: var(--sp-7) 0;
	padding: var(--sp-5);
	border: 1px dashed var(--c-border-inv);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--c-muted-inv);
}

.cc-sim__panel .hec-btn {
	margin-block-start: auto;
}

.cc-sim__panel .cc-sim__notice + .hec-btn {
	margin-block-start: var(--sp-7);
}

/* --- Disposición móvil --- */

.cc-sim--quota {
	display: flex;
	flex-direction: column;
	gap: var(--sp-7);
	padding: var(--sp-7);
	background-color: var(--c-white);
	border: var(--border-w) solid var(--c-border);
}

.cc-sim--quota .cc-sim__title {
	font-size: 1.75rem; /* 28px */
}

.cc-sim--quota .hec-field__label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--fw-regular);
	color: var(--c-body);
}

/* Control deslizante del kilometraje. */
.cc-sim__range {
	width: 100%;
	height: 6px;
	appearance: none;
	border-radius: var(--radius-pill);
	background-color: var(--c-cream-alt);
}

.cc-sim__range::-webkit-slider-thumb {
	appearance: none;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: var(--radius-pill);
	background-image: var(--grad-brand);
	cursor: pointer;
}

.cc-sim__range::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: var(--radius-pill);
	background-image: var(--grad-brand);
	cursor: pointer;
}

.cc-sim__scale {
	display: flex;
	justify-content: space-between;
	font-size: var(--fs-body);
	color: var(--c-ink);
}

.cc-sim__result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block-start: var(--sp-6);
	border-block-start: var(--border-w) solid var(--c-border);
}

.cc-sim__result-label {
	font-size: var(--fs-lead);
	color: var(--c-body);
}

.cc-sim__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.cc-sim__price strong {
	font-size: 2.25rem; /* 36px */
	line-height: 1;
	color: var(--c-bronze);
}

.cc-sim__price small {
	font-size: 0.8125rem;
	line-height: 1.3;
	text-align: end;
	text-transform: uppercase;
	color: var(--c-body);
}

.cc-sim__notice--compact {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--c-body);
	font-size: 0.75rem;
}

/* =========================================================================
 *  SELLOS DE CONFIANZA
 *
 *  <ul class="hec-trust">
 *    <li class="hec-trust__item"><svg class="hec-trust__icon">…</svg>Texto</li>
 *  </ul>
 * ======================================================================= */

/**
 * La línea que separa los sellos de los CTA es el borde superior de la propia
 * lista, no un <hr>: así no hay que pelear contra los distintos reajustes que
 * el navegador y los temas aplican a ese elemento, y se ahorra un nodo.
 */
.hec-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-7);
	margin-block: var(--hero-gap-trust, var(--sp-6)) 0;
	padding: var(--hero-pad-trust, var(--sp-7)) 0 0;
	border-block-start: var(--border-w) solid var(--c-border);
	list-style: none;
}

/* =========================================================================
 *  CABECERA
 *
 *  <header class="hec-header">
 *    <div class="hec-header__bar hec-header__bar--desktop hec-only-desktop">…</div>
 *    <div class="hec-header__bar hec-header__bar--mobile  hec-only-mobile">…</div>
 *  </header>
 *
 *  Un solo landmark con las dos composiciones dentro. Alturas del diseño:
 *  71px en escritorio, 92px en móvil.
 * ======================================================================= */

.hec-header {
	position: relative;
	z-index: var(--z-header);
	background-color: var(--c-black);
	color: var(--c-inverse);
}

.hec-header__inner {
	display: flex;
	align-items: center;
}

.hec-header__bar--desktop .hec-header__inner {
	min-height: 71px;
	gap: var(--sp-9);
}

/* El gap es mínimo a propósito: el botón hamburguesa mide 44px de área táctil
 * pero su icono solo 21px, así que ya aporta separación visual por sí mismo.
 * Con este valor la marca cae en los 55px del diseño. */
.hec-header__bar--mobile .hec-header__inner {
	min-height: 92px;
	gap: var(--sp-1);
}

.hec-header__brand {
	font-size: 2rem; /* 32px — derivado de la altura de caja medida en el diseño */
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
	color: var(--c-inverse);
	text-decoration: none;
	white-space: nowrap;
}

/* En móvil la marca ocupa dos líneas. El ancho máximo fuerza el salto sin
 * partir el texto a mano, de modo que sigue saliendo del nombre del sitio. */
.hec-header__brand--stacked {
	font-size: 1.75rem; /* 28px */
	white-space: normal;
	max-width: 7ch;
	margin-inline-end: auto;
}

/* Marca como logotipo (custom_logo). El PNG lleva las dos líneas «Renault /
 * renting» en su proporción de 2,15:1; se fija la altura y el ancho sale solo.
 * 48px en la barra de 71 y 56px en la de 92 reproducen la presencia que tenía
 * el nombre en texto. */
.hec-header__brand--logo {
	display: flex;
	align-items: center;
	max-width: none;
}

.hec-header__brand--logo .hec-header__logo-img {
	display: block;
	width: auto;
	height: 48px;
}

.hec-header__brand--stacked.hec-header__brand--logo .hec-header__logo-img {
	height: 56px;
}

/* --- Navegación de escritorio --- */

.hec-header__nav {
	margin-inline-end: auto;
}

.hec-menu {
	display: flex;
	align-items: center;
	gap: var(--sp-7);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hec-menu a {
	position: relative;
	display: block;
	padding-block: var(--sp-2);
	font-size: 1rem;
	color: var(--c-inverse);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.hec-menu a:hover {
	color: var(--c-menu-active);
}

/* Ítem activo: naranja vivo con subrayado de 2px. `is-active` lo pone el
 * módulo nav-spy.js según la sección visible (los enlaces de la landing son
 * anclas y WordPress no puede marcarlos por sí mismo). */
.hec-menu .current-menu-item > a,
.hec-menu .current_page_item > a,
.hec-menu .is-active > a {
	color: var(--c-menu-active);
}

.hec-menu .current-menu-item > a::after,
.hec-menu .current_page_item > a::after,
.hec-menu .is-active > a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -2px;
	height: 2px;
	background-color: var(--c-menu-active);
}

/* --- Botón hamburguesa --- */

.hec-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;  /* Área táctil mínima recomendada, aunque el icono mida 21px. */
	height: 44px;
	margin-inline-start: calc(var(--sp-3) * -1);
	padding: 0;
	background: none;
	border: 0;
	color: var(--c-inverse);
	cursor: pointer;
}

.hec-burger__box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 21px;
	height: 14px;
}

.hec-burger__line {
	display: block;
	height: 2px;
	background-color: currentcolor;
	border-radius: var(--radius-pill);
	transition: transform var(--dur-base) var(--ease-out),
		opacity var(--dur-fast) var(--ease-out);
}

/* Estado abierto: las tres líneas se convierten en una cruz. */
[aria-expanded="true"] .hec-burger__line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

[aria-expanded="true"] .hec-burger__line:nth-child(2) {
	opacity: 0;
}

[aria-expanded="true"] .hec-burger__line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* --- Panel de navegación móvil --- */

.hec-mobile-nav {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	padding-block: var(--sp-7) var(--sp-9);
	background-color: var(--c-black);
	border-top: var(--border-w) solid var(--c-border-inv);
	box-shadow: var(--shadow-lg);
}

.hec-mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hec-mobile-nav__list a {
	display: block;
	padding-block: var(--sp-3);
	font-size: 1.25rem;
	font-weight: var(--fw-medium);
	color: var(--c-inverse);
	text-decoration: none;
}

.hec-mobile-nav__list .current-menu-item > a,
.hec-mobile-nav__list .is-active > a {
	color: var(--c-menu-active);
}

/* Bloquea el desplazamiento del documento mientras el panel está abierto. */
.hec-nav-open {
	overflow: hidden;
}

/* =========================================================================
 *  PIE
 *
 *  <footer class="hec-footer hec-on-dark">
 *    <div class="hec-footer__inner hec-footer__inner--desktop hec-only-desktop">…</div>
 *    <div class="hec-footer__inner hec-footer__inner--mobile  hec-only-mobile">…</div>
 *  </footer>
 * ======================================================================= */

.hec-footer {
	background-color: var(--c-black);
}

.hec-footer__inner--desktop {
	padding-block: var(--sp-11) var(--sp-10);
}

.hec-footer__inner--mobile {
	/* Abajo solo los ~20px del diseño: el CTA ya está en el flujo del pie. */
	padding-block: var(--sp-12) var(--sp-5);
}

.hec-footer__stack {
	display: flex;
	flex-direction: column;
}

.hec-footer__inner--desktop .hec-footer__stack {
	align-items: center;
	gap: var(--sp-8);
	text-align: center;
}

.hec-footer__inner--mobile .hec-footer__stack {
	gap: var(--sp-9);
}

.hec-footer__brand {
	margin: 0;
	font-size: 1.625rem; /* 26px */
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight);
	color: var(--c-inverse);
}

.hec-footer__inner--mobile .hec-footer__brand {
	font-size: 1.875rem; /* 30px */
}

.hec-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-9);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hec-footer__menu a {
	font-size: 1rem;
	color: var(--c-inverse-soft);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.hec-footer__menu a:hover {
	color: var(--c-inverse);
}

.hec-footer__legal {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-muted-inv);
}

.hec-footer__legal--caps {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	line-height: 1.7;
}

/* =========================================================================
 *  ACORDEÓN (pie móvil)
 *
 *  <details class="hec-accordion">
 *    <summary class="hec-accordion__head">
 *      <span class="hec-accordion__title">Título</span>
 *      <span class="hec-accordion__icon" aria-hidden="true"></span>
 *    </summary>
 *    <ul class="hec-accordion__list">
 *      <li class="hec-accordion__item"><a href="#">Enlace</a></li>
 *    </ul>
 *  </details>
 *
 *  Usa <details> nativo: sin JavaScript, accesible por teclado de serie.
 * ======================================================================= */

.hec-accordion {
	border-bottom: var(--border-w) solid var(--c-border-inv);
}

.hec-accordion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: var(--sp-6);
	cursor: pointer;
	list-style: none; /* Oculta el triángulo por defecto en Firefox. */
}

/* Oculta el triángulo por defecto en navegadores WebKit. */
.hec-accordion__head::-webkit-details-marker {
	display: none;
}

.hec-accordion__title {
	font-size: 0.9375rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-inverse);
}

/* Icono «+» dibujado con dos trazos: la barra vertical desaparece al abrir. */
.hec-accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.hec-accordion__icon::before,
.hec-accordion__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background-color: var(--c-inverse);
	transform: translateY(-50%);
	transition: opacity var(--dur-fast) var(--ease-out);
}

.hec-accordion__icon::after {
	inset: 0 50% auto auto;
	width: 2px;
	height: 100%;
	transform: translateX(50%);
}

.hec-accordion[open] .hec-accordion__icon::after {
	opacity: 0;
}

/* Enlace de primer nivel sin hijos: mismo aspecto, sin acordeón. */
.hec-accordion--link {
	display: flex;
	align-items: center;
	padding-block: var(--sp-6);
	font-size: 0.9375rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-inverse);
	text-decoration: none;
}

.hec-accordion__list {
	margin: 0;
	padding: 0 0 var(--sp-6);
	list-style: none;
}

.hec-accordion__item a {
	display: block;
	padding-block: var(--sp-2);
	font-size: var(--fs-small);
	color: var(--c-inverse-soft);
	text-decoration: none;
}

.hec-accordion__item a:hover {
	color: var(--c-inverse);
}

/* =========================================================================
 *  HERO PARTIDO — Persona Natural (D1 y M1)
 *
 *  D1: tarjeta de foto (fondo de contenedor) con chip de oferta superpuesto
 *  + panel gris con el mensaje. M1: mensaje y botones apilados, y la foto en
 *  una tarjeta clara con el aviso de oferta debajo.
 * ======================================================================= */

.hec-hero-split__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.hec-hero-split__panel {
	background-color: var(--c-cream-alt);
	border-radius: var(--radius-lg);
}

.hec-chip {
	width: fit-content;
	margin: 0;
	padding: 10px var(--sp-4);
	border-radius: var(--radius-sm);
	background-color: var(--c-black);
	color: var(--c-inverse);
	font-size: 0.8125rem;
	line-height: 1.2;
}

.hec-hero-split__title {
	margin: 0;
	font-size: var(--fs-h2);
	line-height: 1.15;
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
}

.hec-hero-split__lead {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--c-body);
}

.hec-hero-split__legal {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--c-muted-inv);
}

/* --- Composición móvil --- */

.hec-hero-split--mobile .hec-hero-split__title {
	font-size: var(--fs-display);
}

.hec-hero-split__card {
	background-color: var(--c-panel);
	border-radius: var(--radius-lg);
}

.hec-hero-split__photo img {
	width: 100%;
	border-radius: var(--radius-sm);
}

.hec-hero-split__caption {
	margin: 0;
	font-size: 1rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-body);
}

/* =========================================================================
 *  TARJETA PERSONA NATURAL — beneficios (D2 y M2)
 *
 *  D2: tarjeta blanca con borde gris neutro y el icono negro sobre un chip
 *  gris claro. M2 (--row): tarjeta cálida con borde rosado y el icono
 *  naranja suelto a la izquierda del texto.
 * ======================================================================= */

.hec-pncard {
	background-color: var(--c-white);
	border: var(--border-w) solid var(--c-border-soft);
	border-radius: var(--radius-md);
}

.hec-pncard--row {
	background-color: var(--c-panel);
	border-color: var(--c-border);
	border-radius: var(--radius-lg);
}

/* =========================================================================
 *  PROCESO PERSONA NATURAL — (D3 y M3)
 *
 *  D3: banda negra con 4 columnas centradas; los círculos coral van sobre
 *  una línea horizontal continua dibujada por la fila (mismo truco que la
 *  línea vertical del timeline móvil: los círculos son opacos y la tapan).
 *  M3: tarjeta negra que reutiliza hec-step--timeline con círculos en
 *  degradado de marca.
 * ======================================================================= */

.hec-pn-process {
	background-color: var(--c-black);
	color: var(--c-inverse);
}

.hec-pn-process--mobile {
	background-color: transparent;
	color: inherit;
}

.hec-pn-process__card {
	background-color: var(--c-black);
	color: var(--c-inverse);
}

.hec-pn-process__row {
	position: relative;
}

.hec-pn-process__row::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 21px;
	height: var(--border-w);
	background-color: var(--c-border-inv);
}

.hec-pn-process__num {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: var(--radius-pill);
	/* Degradado de marca (de claro a oscuro) en lugar del naranja plano, el
	 * mismo que llevan los iconos de Persona Jurídica. Pedido del cliente. */
	background-image: var(--grad-brand);
	color: var(--c-inverse);
	font-size: 1rem;
	font-weight: var(--fw-bold);
}

.hec-pn-process__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: var(--fw-medium);
	color: var(--c-inverse);
}

.hec-pn-process__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	text-align: center;
	color: var(--c-inverse-soft);
}

/* Timeline móvil sobre negro: círculos de marca y línea tenue. */
.hec-pn-process .hec-step__bullet {
	background-image: var(--grad-brand);
}

.hec-pn-process .hec-process__stack::before {
	background-color: var(--c-border-inv);
}

.hec-pn-process .hec-step__title {
	color: var(--c-inverse);
	font-size: 1.375rem;
	font-weight: var(--fw-bold);
}

.hec-pn-process .hec-step__text {
	color: var(--c-inverse-soft);
	font-size: 1.125rem;
}

/* =========================================================================
 *  CUOTA Y CANON PERSONA NATURAL — (D4 y M4)
 *
 *  D4: foto redondeada + tarjetas grises sin borde con icono coral.
 *  M4: filas cálidas con el título a la izquierda y el check bronce a la
 *  derecha.
 * ======================================================================= */

.hec-pn-quota__photo img {
	width: 100%;
	border-radius: var(--radius-lg);
}

.hec-pn-quota__item {
	background-color: var(--c-cream-alt);
	border-radius: var(--radius-md);
}

.hec-pn-quota__legal {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--c-muted-inv);
}

.hec-pn-quota__check {
	background-color: var(--c-panel);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
}

.hec-pn-quota__check-label {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

/* =========================================================================
 *  FICHA DE VEHÍCULO Y CARRUSEL — Persona Natural (D5 y M5)
 *
 *  <div class="cc-vcarousel">
 *    <article class="cc-vcard cc-vcard--light">…</article>
 *  </div>
 *
 *  El carrusel es scroll horizontal nativo con scroll-snap: sin JavaScript
 *  ni librerías. La ficha oscura (--dark) muestra un vehículo del CPT.
 * ======================================================================= */

.cc-vcard--dark {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--sp-8) var(--sp-8);
	border-radius: var(--radius-lg);
	background-color: var(--c-black);
	color: var(--c-inverse);
}

.cc-vcard__name {
	margin: 0;
	font-size: 1.75rem;
	font-weight: var(--fw-bold);
	color: inherit;
}

.cc-vcard--dark .cc-vcard__desc {
	margin-block: var(--sp-4) 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-inverse-soft);
}

.cc-vcard__rows {
	margin-block: var(--sp-6) 0;
}

.cc-vcard__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: 14px;
	border-block-end: var(--border-w) solid var(--c-border-inv);
}

.cc-vcard__row dt {
	font-size: 0.9375rem;
	color: var(--c-inverse-soft);
}

.cc-vcard__row dd {
	margin: 0;
	font-size: 1rem;
	font-weight: var(--fw-bold);
}

.cc-vcard__row .cc-vcard__price {
	color: var(--c-accent-start);
}

.cc-vcard__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin-block-start: auto;
	padding-block-start: var(--sp-7);
}

/* --- Carrusel móvil --- */

.cc-vcarousel {
	display: flex;
	gap: var(--sp-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: var(--sp-2);
	scrollbar-width: none;
}

.cc-vcarousel::-webkit-scrollbar {
	display: none;
}

.cc-vcard--light {
	flex: 0 0 88%;
	scroll-snap-align: start;
	overflow: hidden;
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
	background-color: var(--c-white);
}

.cc-vcard__media {
	margin: 0;
	background-color: var(--c-cream-alt);
}

.cc-vcard__media img {
	display: block;
	width: 100%;
}

.cc-vcard__info {
	padding: var(--sp-6);
}

.cc-vcard--light .cc-vcard__desc {
	margin-block: var(--sp-2) 0;
	font-size: 1.125rem;
	color: var(--c-body);
}

.cc-vcard__from {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	margin-block: var(--sp-5) 0;
	font-size: 1rem;
	color: var(--c-bronze);
}

.cc-vcard__from span {
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-ink);
}

.cc-vcard__from strong {
	font-size: 1.5rem;
	font-weight: var(--fw-bold);
}

/* Cabecera de la sección de flota: título a la izquierda, «SWIPE» a la
 * derecha con la flecha dibujada con máscara. */
.hec-pn-fleet__swipe {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-size: 1.125rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-bronze);
}

.hec-pn-fleet__swipe::after {
	content: "";
	width: 18px;
	height: 10px;
	background-color: currentcolor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
}

/* La banda de flota móvil va sobre gris cálido y las fotos del collage de
 * escritorio llevan el radio grande del diseño. */
.hec-pn-fleet--mobile {
	background-color: var(--c-cream-alt);
}

.hec-pn-fleet__img img {
	display: block;
	width: 100%;
	border-radius: var(--radius-lg);
}

/* =========================================================================
 *  COMPARATIVA RENTING — Persona Natural (D6 y M6)
 *
 *  <div class="cc-compare"><table class="cc-compare__table">…</table></div>
 *  <details class="cc-compare__acc">…</details>
 * ======================================================================= */

.cc-compare__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

/* El reset de Hello Elementor pinta las tablas con rejilla completa, cebra
 * en filas impares, hover gris y una línea sobre la cabecera: se neutraliza
 * cada cosa con su misma cadena más la clase. OJO: las reglas de cebra y
 * hover solo tocan el fondo — si tocaran el borde, el separador de la fila
 * desaparecería al pasar el ratón. */
.cc-compare__table,
.cc-compare__table tr,
.cc-compare__table th,
.cc-compare__table td {
	border: 0;
	background: none;
}

.cc-compare__table tbody > tr:nth-child(odd) > td,
.cc-compare__table tbody > tr:nth-child(odd) > th,
.cc-compare__table tbody tr:hover > td,
.cc-compare__table tbody tr:hover > th {
	background: none;
}

.cc-compare__table thead:first-child tr:first-child th,
.cc-compare__table thead:first-child tr:first-child td {
	border-block-start: 0;
}

.cc-compare__table thead th {
	padding: var(--sp-5) var(--sp-6);
	background-color: var(--c-cream-alt);
	font-size: 1.0625rem;
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.cc-compare__table thead .cc-compare__renting {
	color: var(--c-accent-end);
}

/* Un separador bajo CADA fila del cuerpo, también la última, siempre
 * visible (el hover no lo toca). */
.cc-compare__table tbody th,
.cc-compare__table tbody td {
	padding: var(--sp-6) var(--sp-6);
	border-block-end: var(--border-w) solid var(--c-border-soft);
	vertical-align: top;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.cc-compare__table tbody th {
	width: 19%;
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.cc-compare__table tbody td {
	width: 43%;
	color: var(--c-body);
}

.cc-compare__table tbody td.cc-compare__win {
	width: 38%;
	color: var(--c-ink);
}

/* --- Acordeón móvil --- */

.cc-compare--accordion {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.cc-compare__acc {
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
	background-color: var(--c-panel);
}

.cc-compare__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-6);
	cursor: pointer;
	list-style: none;
	font-size: 1.375rem;
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.cc-compare__summary::-webkit-details-marker {
	display: none;
}

/* Flecha del acordeón: rota al abrir. */
.cc-compare__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 9px;
	background-color: currentcolor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	transition: transform var(--dur-fast) var(--ease-out);
}

.cc-compare__acc[open] > .cc-compare__summary::after {
	transform: rotate(180deg);
}

.cc-compare__acc[open] > .cc-compare__summary {
	border-block-end: var(--border-w) solid var(--c-border);
}

.cc-compare__pairs {
	margin: 0;
	padding: var(--sp-6);
}

.cc-compare__pair {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
}

.cc-compare__pair + .cc-compare__pair {
	margin-block-start: var(--sp-5);
}

.cc-compare__pair dt {
	font-size: 1.25rem;
	font-weight: var(--fw-bold);
	color: var(--c-body);
}

.cc-compare__pair dd {
	margin: 0;
	font-size: 1.25rem;
	color: var(--c-body);
}

.cc-compare__pair .cc-compare__credit {
	color: var(--c-error);
}

/* =========================================================================
 *  PREGUNTAS FRECUENTES — Persona Natural (D7 y M7)
 *
 *  <details class="cc-faq__item"><summary class="cc-faq__question">…
 * ======================================================================= */

.hec-pn-faq {
	background-color: var(--c-cream-alt);
}

.hec-pn-faq--mobile {
	background-color: var(--c-panel);
}

.cc-faq {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.cc-faq__item {
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	background-color: var(--c-white);
}

.cc-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-6);
	cursor: pointer;
	list-style: none;
	font-size: 1.25rem;
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.cc-faq__question::-webkit-details-marker {
	display: none;
}

.cc-faq__answer {
	padding: 0 var(--sp-6) var(--sp-6);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-body);
}

.cc-faq__answer p {
	margin: 0;
}

.hec-pn-faq__note {
	margin: 0;
	font-size: 1.125rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-bronze);
}

/* =========================================================================
 *  FORMULARIO PERSONA NATURAL — (D8 y M8)
 *
 *  Añadidos sobre cc-form: subtítulo de bloque, barra de progreso del flujo
 *  por pasos y título de cada paso.
 * ======================================================================= */

.cc-form__subhead {
	margin-block: var(--sp-6) 0;
	font-size: 0.9375rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-body);
}

.cc-form__progress {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: var(--sp-3);
	font-size: 1.0625rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-ink);
}

.cc-form__bar {
	flex: 1 0 100%;
	height: 6px;
	border-radius: var(--radius-pill);
	background-color: var(--c-cream-alt);
	overflow: hidden;
}

.cc-form__bar-fill {
	display: block;
	inline-size: 34%;
	height: 100%;
	border-radius: var(--radius-pill);
	background-image: var(--grad-brand);
	transition: inline-size var(--dur-base) var(--ease-out);
}

.cc-form__step-title {
	margin-block: var(--sp-8) var(--sp-6);
	font-size: var(--fs-display);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
}

/* Tarjeta del formulario de escritorio: mitad texto, mitad foto. */
.hec-pn-form__card {
	overflow: hidden;
	border: var(--border-w) solid var(--c-border-soft);
	border-radius: var(--radius-lg);
	background-color: var(--c-cream);
}

.hec-pn-form__sub {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-body);
}

/* =========================================================================
 *  CIERRE PERSONA NATURAL — (D9)
 *
 *  Banda con el degradado de marca y el mensaje final centrado en blanco.
 * ======================================================================= */

.hec-pn-cta {
	background-image: var(--grad-brand);
	color: var(--c-inverse);
}

.hec-pn-cta__title {
	max-width: 620px;
	margin: 0;
	text-align: center;
	color: var(--c-inverse);
}

/* =========================================================================
 *  FLOTANTES PERSONA NATURAL — (M10)
 *
 *  Botón de WhatsApp y barra inferior fija «Simula ahora». Viven en la
 *  página, no en el tema: solo existen en esta landing. El pie móvil gana
 *  relleno inferior cuando la página los trae, para que la barra no tape
 *  su contenido.
 * ======================================================================= */

/* Botón flotante de WhatsApp de todas las landings (contenedor wa0f01 de la
 * página, escritorio y móvil). Toma el degradado de marca de cada página
 * (--grad-brand: coral en V1, cálido en Persona Natural V2, futuro en
 * Persona Jurídica V2) en vez del verde de WhatsApp. En móvil sube por encima
 * de la barra fija «más información» cuando la página la tiene. */
.hec-wa-float.e-con {
	--width: auto;
	position: fixed;
	inset-block-end: var(--sp-6, 24px);
	inset-inline-end: var(--sp-6, 24px);
	z-index: var(--z-sticky);
	width: auto;
	min-height: 0;
}

/* Botón de WhatsApp (widget botón wa0f02: icono + texto). En reposo es un
 * círculo con solo el icono y un pulso suave; al pasar el cursor se estira a
 * píldora y aparece la etiqueta («Hablemos»), como en Bumerang. */
.hec-wa-float .hec-wa .elementor-button {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	height: 60px;
	min-width: 60px;
	padding: 0 15px;
	border: 2px solid rgb(255 255 255 / 0.9);
	border-radius: var(--radius-pill);
	background-color: transparent;
	background-image: var(--grad-brand);
	color: var(--c-inverse);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: 0 10px 28px -8px rgb(28 27 27 / 0.45);
	transition: padding 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hec-wa-float .hec-wa .elementor-button::before {
	content: '';
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--grad-brand);
	animation: hec-wa-pulse 2.8s ease-out infinite;
}

@keyframes hec-wa-pulse {
	0% { opacity: 0.55; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.4); }
}

.hec-wa-float .hec-wa .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	gap: 0;
	transition: gap 0.3s ease;
}

.hec-wa-float .hec-wa .elementor-button-icon {
	display: flex;
	margin: 0;
	font-size: 26px;
}

.hec-wa-float .hec-wa .elementor-button-icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
}

.hec-wa-float .hec-wa .elementor-button-text {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.35s ease;
}

.hec-wa-float .hec-wa .elementor-button:hover,
.hec-wa-float .hec-wa .elementor-button:focus-visible {
	padding: 0 24px 0 18px;
	color: var(--c-inverse);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -8px rgb(28 27 27 / 0.55);
}

.hec-wa-float .hec-wa .elementor-button:hover .elementor-button-content-wrapper,
.hec-wa-float .hec-wa .elementor-button:focus-visible .elementor-button-content-wrapper {
	gap: 10px;
}

.hec-wa-float .hec-wa .elementor-button:hover .elementor-button-text,
.hec-wa-float .hec-wa .elementor-button:focus-visible .elementor-button-text {
	max-width: 140px;
}

@media (prefers-reduced-motion: reduce) {
	.hec-wa-float .hec-wa .elementor-button::before {
		display: none;
	}
}

@media (max-width: 1024px) {
	.hec-wa-float.e-con {
		inset-inline-end: var(--sp-5);
		inset-block-end: var(--sp-5);
	}

	body:has(.hec-pn-bar) .hec-wa-float.e-con {
		inset-block-end: 104px;
	}

	.hec-wa-float .hec-wa .elementor-button {
		height: 56px;
		min-width: 56px;
		padding: 0 13px;
	}
}
.hec-pn-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--z-sticky);
	padding-block-end: calc(12px + env(safe-area-inset-bottom));
	background-color: rgb(244 241 240 / 0.95);
}

/* El relleno inferior que reserva sitio a la barra fija va declarado en la
 * propia sección del pie de la página (gen-footer.js). */

/* Los dos botones de cabecera de Persona Natural y las anclas de navegación
 * (contenedores vacíos de altura cero compartidos por ambas composiciones). */
.hec-header__ctas {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.hec-anchor {
	min-height: 0;
	padding: 0;
}

/* Hello Elementor resetea las sombras de los enlaces (`.elementor a`, 0-1-1)
 * y le gana a la clase sola: los botones de contorno que son anclas o
 * botones nativos necesitan el calificador de etiqueta. */
a.hec-btn--outline-light,
button.hec-btn--outline-light {
	box-shadow: inset 0 0 0 var(--border-w) var(--c-inverse);
}

a.hec-btn--outline-dark,
button.hec-btn--outline-dark {
	box-shadow: inset 0 0 0 calc(var(--border-w) * 2) var(--c-ink);
}

/* La comparativa de escritorio va sobre banda blanca fría; la móvil sigue
 * sobre el fondo crema de la página. */
.hec-pn-compare {
	background-color: var(--c-paper);
}

.hec-pn-compare--mobile {
	background-color: transparent;
}

/* Las disposiciones de Persona Natural no son tarjeta: viven dentro de la
 * tarjeta partida del formulario (D8) o directamente en la sección (M8), así
 * que se les quita el marco blanco que .cc-form trae de la home y se les da
 * su ritmo vertical propio. */
.cc-form--simulator,
.cc-form--paso123 {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* «Datos personales» va en caja normal sobre un separador fino, como el
 * diseño, no como antetítulo en mayúsculas. */
.cc-form--simulator .cc-form__subhead,
.cc-form--paso123 .cc-form__subhead {
	margin-block: var(--sp-2) 0;
	padding-block-start: var(--sp-6);
	border-block-start: var(--border-w) solid var(--c-border-soft);
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	text-transform: none;
	letter-spacing: 0;
	color: var(--c-body);
}

/* En el cierre, el botón fantasma se vuelve negro al pasar el ratón
 * (pedido del cliente: el negro es el estado hover, no el de reposo). */
.hec-pn-cta .hec-btn--outline-light:hover,
.hec-pn-cta .hec-btn--outline-light:focus-visible {
	background-color: var(--c-black);
	box-shadow: inset 0 0 0 var(--border-w) var(--c-black);
}

/* =========================================================================
 *  PIE PERSONA NATURAL — vive DENTRO de la página como secciones de
 *  Elementor (gen-footer.js), para ser 100% editable desde el panel. La
 *  plantilla del tema no pinta pie en esta página. Marca y descripción a la
 *  izquierda, columnas Servicios/Legal a la derecha, filete y línea
 *  inferior con el aviso comercial; en móvil, acordeones Nosotros/Legal.
 * ======================================================================= */

.hec-pn-footer {
	background-color: var(--c-black);
	color: var(--c-inverse-soft);
}

.hec-footer__brand--pn {
	font-size: 1.5rem;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight);
	color: var(--c-inverse);
}

.hec-footer__grid {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-9);
}

.hec-footer__about {
	max-width: 340px;
}

.hec-footer--pn .hec-footer__inner--desktop .hec-footer__brand {
	font-size: 1.5rem;
}

.hec-footer__desc {
	margin: var(--sp-4) 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-muted-inv);
}

.hec-footer__cols {
	display: flex;
	gap: var(--sp-10);
}

.hec-footer__col-title {
	margin: 0 0 var(--sp-4);
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-accent-start);
}

.hec-footer__col-menu {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hec-footer__col-menu a {
	font-size: 0.9375rem;
	color: var(--c-inverse-soft);
	text-decoration: none;
}

.hec-footer__col-menu a:hover {
	color: var(--c-inverse);
}

.hec-footer__bottom {
	margin-block-start: var(--sp-9);
	padding-block-start: var(--sp-6);
	border-block-start: var(--border-w) solid var(--c-border-inv);
}

.hec-footer__pending {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-inverse-soft);
}

/* Variante oscura del acordeón de preguntas para el pie móvil. */
.cc-faq--footer .cc-faq__item {
	background: none;
	border: 0;
	border-block-end: var(--border-w) solid var(--c-border-inv);
	border-radius: 0;
}

.cc-faq--footer .cc-faq__question {
	padding-inline: 0;
	font-size: 1.0625rem;
	color: var(--c-inverse);
}

/* En el pie el indicador es el «+» del diseño, no la flecha del acordeón
 * de preguntas; al abrir se convierte en «−». */
.cc-faq--footer .cc-faq__question::after {
	content: "+";
	width: auto;
	height: auto;
	background: none;
	mask-image: none;
	font-size: 1.375rem;
	font-weight: var(--fw-regular);
	line-height: 1;
	transition: none;
	transform: none;
}

.cc-faq--footer .cc-faq__item[open] > .cc-faq__question::after {
	content: "−";
	transform: none;
}

.cc-faq--footer .cc-faq__answer {
	padding-inline: 0;
	color: var(--c-inverse-soft);
}

.cc-faq--footer .cc-faq__answer a {
	color: var(--c-inverse-soft);
	text-decoration: none;
}

.cc-faq--footer .cc-faq__answer a:hover {
	color: var(--c-inverse);
}

/* Texto legal del pie móvil de la landing: pequeño y apagado. */
.hec-pn-footer__legal-m {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--c-muted-inv);
}

/* Afinado del flujo por pasos a las proporciones del Figma: título del paso
 * compacto, etiquetas de campo en mayúsculas pequeñas y progreso discreto. */
.cc-form--paso123 .cc-form__step-title {
	margin-block: var(--sp-6) var(--sp-2);
	font-size: 1.5rem;
}

.cc-form--paso123 .hec-field__label {
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-ink);
}

.cc-form--paso123 .cc-form__progress {
	font-size: 0.8125rem;
}

/* En el flujo por pasos el cuerpo no es tarjeta: sin relleno, todo alineado
 * al mismo borde que la barra de progreso, como el diseño. */
.cc-form--paso123 .cc-form__body {
	padding: 0;
}

/* =========================================================================
 *  MÓDULO PROMOCIONAL — Persona Natural (D5, tarjeta negra)
 *
 *  Sustituye a la ficha de vehículo concreto (Koleos): el cliente pidió un
 *  mensaje general. Contenedor de Elementor con título, texto, tres pilares
 *  «Renta. Disfruta. Renueva.» con icono y dos botones (sin destino hasta
 *  que el cliente lo confirme).
 * ======================================================================= */

.hec-pn-promo {
	background-color: var(--c-black);
	border-radius: var(--radius-lg);
	color: var(--c-inverse-soft);
}

.hec-pn-promo__title {
	font-size: 2rem;
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
	color: var(--c-inverse);
}

.hec-pn-promo__text {
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--c-inverse-soft);
}

/* Fila de pilares con separadores verticales entre ellos. */
.hec-pn-promo__pillars {
	display: flex;
	align-items: stretch;
}

.hec-pn-promo__pillar {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

.hec-pn-promo__pillar + .hec-pn-promo__pillar {
	border-inline-start: var(--border-w) solid var(--c-border-inv);
}

/* =========================================================================
 *  LOGOTIPO EN EL PIE — Persona Natural
 * ======================================================================= */

.hec-footer__logo img {
	display: block;
	width: 168px;
	height: auto;
}

/* =========================================================================
 *  GRUPO DE OPCIONES (radio) — formulario de registro
 *
 *  <fieldset class="hec-choice">
 *    <legend class="hec-choice__legend">Pregunta</legend>
 *    <label class="hec-choice__option"><span>Opción</span><input type="radio"></label>
 *  </fieldset>
 *
 *  Reproduce el formulario de referencia del cliente: cada opción en su
 *  caja, con el círculo a la derecha.
 * ======================================================================= */

.hec-choice {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hec-choice__legend {
	margin-block-end: var(--sp-1);
	padding: 0;
	font-size: 1rem;
	line-height: var(--lh-body);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
}

.hec-choice__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 48px;
	padding-inline: var(--sp-4);
	background-color: var(--c-white);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
	color: var(--c-ink);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.hec-choice__option:hover {
	border-color: var(--c-accent-start);
}

.hec-choice__option:has(.hec-choice__input:checked) {
	border-color: var(--c-accent-start);
	box-shadow: inset 0 0 0 var(--border-w) var(--c-accent-start);
}

.hec-choice__option:has(.hec-choice__input:focus-visible) {
	outline: 2px solid var(--c-accent-deep);
	outline-offset: 2px;
}

.hec-choice__input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--c-accent-start);
}

/* =========================================================================
 *  FORMULARIO DE REGISTRO — Persona Natural (disposición «natural»)
 *
 *  Como las disposiciones históricas, no es tarjeta: vive dentro de la
 *  tarjeta partida de la sección o del panel de la ventana emergente.
 * ======================================================================= */

.cc-form--natural {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.cc-form--natural .cc-form__contact {
	margin-block-start: var(--sp-2);
	padding-block-start: var(--sp-5);
	border-block-start: var(--border-w) solid var(--c-border-soft);
}

.cc-form--natural .cc-form__subhead {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: var(--fw-bold);
	text-transform: none;
	letter-spacing: 0;
	color: var(--c-ink);
}

.cc-form__hint {
	margin: var(--sp-1) 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--c-body);
}

/* =========================================================================
 *  VENTANA EMERGENTE — formulario de registro (Persona Natural)
 *
 *  <dialog class="hec-modal"> nativo: el navegador aporta el fondo
 *  (::backdrop), la pila de foco y Escape. Se abre desde lead-modal.js.
 * ======================================================================= */

.hec-modal {
	width: min(560px, calc(100% - var(--sp-7)));
	max-height: calc(100dvh - var(--sp-7));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	background-color: var(--c-cream);
	color: var(--c-body);
	box-shadow: var(--shadow-lg);
	overflow: auto;
}

.hec-modal::backdrop {
	background-color: rgb(0 0 0 / 0.6);
}

.hec-modal__panel {
	position: relative;
	padding: var(--sp-8) var(--sp-7) var(--sp-7);
}

.hec-modal__close {
	position: absolute;
	inset-block-start: var(--sp-3);
	inset-inline-end: var(--sp-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	cursor: pointer;
}

.hec-modal__close:hover {
	background-color: var(--c-cream-alt);
}

.hec-modal__title {
	margin: 0 0 var(--sp-2);
	padding-inline-end: var(--sp-8);
	font-size: 1.75rem;
	line-height: 1.15;
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
}

.hec-modal__sub {
	margin: 0 0 var(--sp-6);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-body);
}

/* Bloquea el desplazamiento del documento mientras la ventana está abierta. */
.hec-modal-open {
	overflow: hidden;
}

@media (max-width: 1024px) {
	.hec-modal__panel {
		padding: var(--sp-7) var(--sp-5) var(--sp-6);
	}
}

/* =========================================================================
 *  PREGUNTAS FRECUENTES — lista con desplazamiento interno
 *
 *  Pedido del cliente (15-09-2026): con 24 preguntas la sección se hacía
 *  demasiado larga. La lista se acota en alto y se desplaza por dentro, de
 *  modo que la sección ocupa siempre lo mismo sea cual sea el número de
 *  preguntas. No afecta al acordeón del pie móvil (cc-faq--footer).
 *
 *  `scrollbar-gutter: stable` reserva el hueco de la barra desde el inicio
 *  para que las tarjetas no cambien de ancho al aparecer. El relleno
 *  derecho separa las tarjetas de la barra; el degradado inferior avisa de
 *  que hay más contenido sin tapar la última pregunta del todo.
 * ======================================================================= */

.hec-pn-faq .cc-faq:not(.cc-faq--footer) {
	--faq-max-height: 560px;

	position: relative;
	max-height: var(--faq-max-height);
	padding-inline-end: var(--sp-3);
	padding-block-end: var(--sp-2);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: var(--c-accent-start) var(--c-cream-alt);
}

.hec-pn-faq .cc-faq:not(.cc-faq--footer)::-webkit-scrollbar {
	width: 8px;
}

.hec-pn-faq .cc-faq:not(.cc-faq--footer)::-webkit-scrollbar-track {
	background-color: var(--c-cream-alt);
	border-radius: var(--radius-pill);
}

.hec-pn-faq .cc-faq:not(.cc-faq--footer)::-webkit-scrollbar-thumb {
	background-image: var(--grad-brand);
	border-radius: var(--radius-pill);
}

/* El degradado va en el envoltorio del widget, que no se desplaza, para que
 * quede fijo al pie de la caja. Se acota al ancho de las tarjetas (sin la
 * barra) y deja pasar los clics. */
.hec-pn-faq .elementor-widget-cc_faq .elementor-widget-container {
	position: relative;
}

.hec-pn-faq .elementor-widget-cc_faq .elementor-widget-container::after {
	content: "";
	position: absolute;
	inset-inline: 0 calc(var(--sp-3) + 8px);
	inset-block-end: 0;
	height: 56px;
	pointer-events: none;
	background-image: linear-gradient(to bottom, transparent, var(--c-cream-alt));
}

.hec-pn-faq--mobile .elementor-widget-cc_faq .elementor-widget-container::after {
	background-image: linear-gradient(to bottom, transparent, var(--c-panel));
}

@media (max-width: 1024px) {
	.hec-pn-faq .cc-faq:not(.cc-faq--footer) {
		--faq-max-height: 520px;
	}
}

/* =========================================================================
 *  PERSONA JURÍDICA — revisión del cliente (15-09-2026)
 *
 *  La landing pasa a UNA composición responsive (decisión del cliente:
 *  «el móvil debe tener casi la misma información que escritorio»). Las
 *  secciones que eran solo de escritorio ahora se ven en todos los anchos;
 *  el apilado de columnas lo hacen los ajustes responsive de Elementor y
 *  aquí van los retoques de aspecto.
 * ======================================================================= */

/* Pie del tema: la marca es ahora el logotipo. */
.hec-footer__brand--logo {
	display: block;
	width: fit-content;
	margin: 0;
	line-height: 0;
}

.hec-footer__brand--logo img {
	display: block;
	width: 168px;
	height: auto;
}

.hec-footer__inner--mobile .hec-footer__brand--logo img {
	width: 150px;
}

/* Antetítulo colocado DESPUÉS de un título o párrafo (no encabezando la
 * sección): lleva aire por arriba. */
.hec-eyebrow--below {
	margin-block-start: var(--sp-6);
}

/* Cierre (D10): párrafo bajo el título, en blanco suave y centrado. */
.hec-cta__text {
	max-width: 560px;
	margin: var(--sp-5) auto 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-inverse-soft);
}

/* Proceso de Persona Jurídica: misma banda negra y círculos que Persona
 * Natural, pero los números en el naranja vivo plano, el título en negrita y
 * la descripción en blanco ligero (NouvelR Light), como pidió el cliente. */
.hec-pj-process .hec-pn-process__num {
	background-image: none;
	background-color: var(--c-accent-vivid);
	font-size: 1.125rem;
}

.hec-pj-process .hec-pn-process__title {
	font-weight: var(--fw-bold);
}

.hec-pj-process .hec-pn-process__text {
	font-weight: 300;
	color: var(--c-inverse);
}

/* =========================================================================
 *  PRESENCIA EN COLOMBIA — infografía de la red (módulo nuevo)
 *
 *  Banda negra con cuatro cifras grandes en naranja vivo y dos enlaces a la
 *  red de talleres y concesionarios. Las cifras las entregó el cliente y
 *  están pendientes de validación por su parte.
 * ======================================================================= */

.hec-stats {
	background-color: var(--c-black);
	color: var(--c-inverse-soft);
}

.hec-stat {
	border: var(--border-w) solid var(--c-border-inv);
	border-radius: var(--radius-lg);
	background-color: rgb(255 255 255 / 0.04);
	text-align: center;
}

.hec-stat__num {
	margin: 0;
	font-size: 3.5rem;
	font-weight: var(--fw-bold);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: var(--c-accent-vivid);
}

.hec-stat__label {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--c-inverse);
}

@media (max-width: 1024px) {
	.hec-stat__num {
		font-size: 2.5rem;
	}
}

/* =========================================================================
 *  PÁGINA LEGAL — política de privacidad
 *
 *  Página de WordPress sin Elementor: el contenido va envuelto en
 *  <div class="hec-legal"> dentro del <main> de Hello Elementor. Columna de
 *  lectura acotada, jerarquía clara y ritmo vertical cómodo.
 * ======================================================================= */

/* Hello Elementor pinta <main class="site-main"> con .page-header (título)
 * y .page-content; ambos se acotan a la columna de lectura. */
.site-main:has(.hec-legal) {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--sp-9) var(--sp-11);
	padding-inline: var(--container-pad);
}

.site-main:has(.hec-legal) .page-header,
.site-main:has(.hec-legal) .page-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

.site-main:has(.hec-legal) .entry-title {
	/* El tema padre le pone 10px de relleno lateral y un ancho máximo propio. */
	max-width: none;
	padding-inline: 0;
	margin-block: 0 var(--sp-5);
	font-size: 2.5rem;
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
}

.hec-legal__intro {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-body);
}

.hec-legal h2 {
	margin-block: var(--sp-8) var(--sp-3);
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
}

.hec-legal h3 {
	margin-block: var(--sp-5) var(--sp-2);
	font-size: 1.125rem;
	color: var(--c-ink);
}

.hec-legal p,
.hec-legal li {
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--c-body);
}

.hec-legal ul {
	margin: 0 0 var(--sp-4);
	padding-inline-start: 1.25rem;
}

.hec-legal li + li {
	margin-block-start: var(--sp-2);
}

.hec-legal strong {
	color: var(--c-ink);
}

/* Enlace a la política dentro de la casilla de consentimiento. */
.hec-check__link {
	margin-inline-start: 0.25em;
	color: var(--c-accent-deep);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
}

/* =========================================================================
 *  VENTANA DE CONFIRMACIÓN — «¡Solicitud recibida!»
 *
 *  Se abre al enviar cualquier formulario de solicitud (lead-modal.js).
 *  Misma caja que la ventana del formulario, más estrecha y centrada, con
 *  el icono de verificación sobre el degradado de marca.
 * ======================================================================= */

.hec-modal--done {
	width: min(440px, calc(100% - var(--sp-7)));
}

.hec-modal__panel--done {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--sp-9) var(--sp-7) var(--sp-7);
	text-align: center;
}

.hec-done__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-block-end: var(--sp-5);
	border-radius: var(--radius-pill);
	background-image: var(--grad-brand);
	color: var(--c-inverse);
	box-shadow: var(--shadow-glow);
}

.hec-modal__panel--done .hec-done__title {
	margin: 0 0 var(--sp-3);
	padding: 0;
	font-size: 1.75rem;
}

.hec-done__text {
	max-width: 32ch;
	margin: 0 0 var(--sp-6);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--c-body);
}

/* El botón «Aceptar» no debe heredar el estilo de botón de Hello Elementor. */
.hec-modal__panel--done button.hec-btn {
	min-height: 50px;
	border: 0;
	font-family: var(--font-body);
}