/**
 * Puente con Elementor.
 *
 * Adapta los componentes de components.css a la estructura que genera
 * Elementor. No define componentes nuevos y no debe cambiar nada fuera del
 * contexto de Elementor.
 *
 * DOS PRINCIPIOS, para no acabar peleando especificidades ni usando !important:
 *
 *   1. Los contenedores de Elementor se controlan ALIMENTANDO SUS PROPIAS
 *      VARIABLES (`--display`, `--max-width`, `--padding-*`…). Elementor las
 *      lee en `.e-con`, así que el valor gana siempre, cargue quien cargue
 *      después. Cuando no existe variable para lo que hace falta, se usa el
 *      selector `.e-con.<clase>`, que ya duplica la especificidad de Elementor.
 *
 *   2. Los widgets aplican la clase del panel al <div> EXTERIOR, no al elemento
 *      visible. Para lo que se hereda (color, tipografía) basta con eso; para
 *      lo que tiene caja propia —el botón— hace falta trasladar el estilo.
 */

/* =========================================================================
 *  REPARTO DE RESPONSABILIDADES CON ELEMENTOR
 *
 *  Elementor escribe el CSS de cada elemento con selectores del tipo
 *  `.elementor-11 .elementor-element.elementor-element-abc123` (0-3-0), pero
 *  SOLO cuando el ajuste correspondiente está definido. Sus reglas genéricas
 *  (`.e-con`, `.elementor-widget`) son de 0-1-0 y 0-2-0.
 *
 *  De ahí el reparto:
 *
 *    · ESTRUCTURA (dirección, anchos de columna, ancho de caja, relleno de
 *      sección) → ajustes del contenedor, versionados en exports/templates/.
 *      Es donde los tocaría el cliente desde el panel.
 *
 *    · ESPACIADO FINO Y APARIENCIA → aquí, con el selector
 *      `.elementor-element.<clase>` (0-2-0). Gana a lo genérico de Elementor y
 *      no compite con nada, porque esos ajustes se dejan sin definir. Si el
 *      cliente cambia un margen desde el panel, su regla (0-3-0) gana a la
 *      nuestra, que es justo el comportamiento deseado.
 * ======================================================================= */

/* El kit de Elementor separa los widgets 20px entre sí. El diseño tiene sus
 * propias medidas, así que se anula en el contexto de nuestras secciones. */
.e-con > .elementor-widget:not(:last-child) {
	--kit-widget-spacing: 0px;
}

/**
 * El relleno de sección se declara una sola vez, en los ajustes del contenedor.
 *
 * En un contenedor «boxed» Elementor aplica su relleno al hijo `.e-con-inner`,
 * mientras que la clase del componente queda en el `.e-con` exterior. Si el
 * componente también declarase relleno, se sumarían los dos y la sección
 * mediría el doble de lo previsto.
 */
.e-con.hec-hero {
	padding-block: 0;
}

/* =========================================================================
 *  ESPACIADO VERTICAL DEL HERO
 *
 *  Medidas tomadas del diseño y verificadas contra el PNG.
 * ======================================================================= */

.elementor .elementor-element.hec-hero__title {
	margin-block-start: var(--hero-gap-title);
}

.elementor .elementor-element.hec-hero__lead {
	margin-block-start: var(--hero-gap-lead);
}

.elementor .elementor-element.hec-hero__actions {
	margin-block-start: var(--hero-gap-actions);
}

.elementor .elementor-element.hec-hero__media {
	margin-block-start: var(--hero-gap-media, 0);
}

/* =========================================================================
 *  ESPACIADO VERTICAL DE LAS SECCIONES CON TARJETAS
 * ======================================================================= */

.elementor .elementor-element.hec-section-head__sub {
	margin-block-start: var(--head-gap-sub, 24px);
}

/* Ancho que reproduce el corte en dos líneas del diseño. */
.elementor .elementor-element.hec-cta__title {
	max-width: 620px;
}

/**
 * El bloque del formulario mide 674px sobre una sección de 1152 y va centrado.
 *
 * El centrado se hace aquí y no desde el panel a propósito: ya se perdió una
 * vez. Alguien lo centró arrastrando el ancho del contenedor en Elementor, lo
 * que lo pasó a modo «boxed» con 805px y lo dejó 130px más ancho que el diseño.
 * Con el margen automático el bloque queda centrado sea cual sea su ancho, y la
 * cabecera de la sección conserva el suyo completo.
 */
.elementor .e-con.hec-form__wrap {
	margin-inline: auto;
}

/**
 * La cabecera comparte columna con el formulario: 674px centrados.
 *
 * Sin esto ocupa los 1112px de la sección y «Inicia tu propuesta corporativa»
 * —690px a 48px— cabe en una línea, mientras que el diseño lo parte en dos.
 * Acotándola a la misma anchura que la tarjeta, el corte cae donde debe y el
 * subtítulo, que mide 648px, sigue entrando entero.
 */
.elementor .hec-form .e-con.hec-section-head {
	max-width: 674px;
	margin-inline: auto;
}

/* =========================================================================
 *  HERO PARTIDO — Persona Natural (D1 y M1)
 *
 *  El H1 de esta página es más pequeño que el display de base.css, y como la
 *  regla de base ataca al elemento h1 directamente, la clase del widget no
 *  basta: hay que llegar hasta el h1 interior.
 * ======================================================================= */

.elementor .elementor-element.hec-hero-split__title h1 {
	/* 46px medidos en el PNG: un punto menos que --fs-h2 para que el corte
	 * de línea caiga como en el diseño («Conduce un / Renault 0 km / …»). */
	font-size: 2.875rem;
	line-height: 1.15;
	letter-spacing: var(--ls-tight);
}

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

/* =========================================================================
 *  PROCESO PERSONA NATURAL — (D3 y M3)
 * ======================================================================= */

.hec-pn-process .elementor-element.hec-section-head__title h2 {
	color: var(--c-inverse);
}

.hec-pn-process--mobile .elementor-element.hec-section-head__title h2 {
	font-size: var(--fs-display);
}

.elementor .elementor-element.hec-pn-process__icon .elementor-icon {
	color: var(--c-inverse);
}

.elementor .elementor-element.hec-pn-process__icon .elementor-icon svg {
	width: 30px;
	height: 30px;
}

.elementor .elementor-element.hec-pn-process__row {
	margin-block-start: 56px;
}

/* El texto de cada paso se acota al ancho del diseño para que parta en dos
 * líneas centradas, como en el Figma. */
.elementor .elementor-element.hec-pn-process__text {
	max-width: 220px;
	margin-inline: auto;
}

.hec-pn-process .elementor-element.hec-process__stack {
	--grid-gap-top: 48px;
}

/* =========================================================================
 *  CUOTA Y CANON PERSONA NATURAL — (D4 y M4)
 * ======================================================================= */

.elementor .elementor-element.hec-pn-quota__box .elementor-icon {
	--icon-size: 30px;

	color: var(--c-accent-end);
}

.elementor .elementor-element.hec-pn-quota__box .elementor-icon-box-title {
	margin-block-start: 0;
	font-size: 1.125rem;
	font-weight: var(--fw-medium);
}

.elementor .elementor-element.hec-pn-quota__box .elementor-icon-box-description {
	--box-gap-text: 4px;

	font-size: 0.9375rem;
}

.elementor .elementor-element.hec-pn-quota__row {
	margin-block-start: 48px;
}

.elementor .elementor-element.hec-pn-quota__stack {
	margin-block-start: 40px;
}

/* El rótulo ocupa el espacio flexible y el check conserva el suyo: sin esto
 * los widgets miden 100% y el check se cae a la fila siguiente. */
.elementor .elementor-element.hec-pn-quota__check-label {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.elementor .elementor-element.hec-pn-quota__check-icon {
	flex: 0 0 auto;
	width: auto;
}

.elementor .elementor-element.hec-pn-quota__check-icon .elementor-icon {
	display: flex;
	color: var(--c-accent-deep);
}

.elementor .elementor-element.hec-pn-quota__check-icon .elementor-icon svg {
	width: 24px;
	height: 24px;
}

.elementor-widget-heading.hec-pn-quota__check-label .elementor-heading-title {
	font: inherit;
	color: inherit;
}

.hec-pn-quota--mobile .elementor-element.hec-section-head__title h2 {
	font-size: var(--fs-display);
}

.hec-pn-fleet--mobile .elementor-element.hec-section-head__title h2 {
	font-size: var(--fs-display);
}

/**
 * La ficha oscura del vehículo debe medir lo mismo que el collage: la
 * columna ya se estira con la fila, pero el widget de dentro no crece por
 * sí solo. Se le da el alto completo en cadena hasta la tarjeta, cuyo
 * margin-block-start:auto en los botones los ancla abajo.
 */
.elementor .e-con.hec-pn-fleet__card > .elementor-widget-cc_vehicle_card {
	flex-grow: 1;
}

.hec-pn-fleet__card .elementor-widget-cc_vehicle_card .elementor-widget-container {
	height: 100%;
}

/* El título del cierre va en blanco sobre el degradado; el color debe llegar
 * al h2, no quedarse en el div del widget. */
.elementor .elementor-element.hec-pn-cta__title h2 {
	text-align: center;
	color: var(--c-inverse);
}

/* =========================================================================
 *  PIE PERSONA NATURAL — puentes de los widgets de la página
 * ======================================================================= */

.elementor-widget-heading.hec-footer__brand--pn .elementor-heading-title,
.elementor-widget-heading.hec-footer__col-title .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* El bloque de columnas abraza su contenido y el space-between del grid lo
 * lleva a la derecha, como en el diseño (los contenedores de Elementor
 * ocupan el 100% por defecto). */
.elementor .e-con.hec-footer__cols {
	--width: auto;
}

/* Listas de enlaces de las columnas: en vertical, sin los ajustes de la
 * vista en línea de Elementor. */
.elementor .elementor-element.hec-pn-footer__menu .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
}

.elementor .elementor-element.hec-pn-footer__menu .elementor-icon-list-item {
	margin: 0;
	padding: 0;
}

.elementor .elementor-element.hec-pn-footer__menu .elementor-icon-list-item,
.elementor .elementor-element.hec-pn-footer__menu .elementor-icon-list-item a {
	justify-content: flex-start;
	text-align: start;
}

/* Elementor inyecta un icono de check por defecto cuando el ítem no declara
 * ninguno: aquí la lista es solo texto. */
.elementor .elementor-element.hec-pn-footer__menu .elementor-icon-list-icon {
	display: none;
}

.elementor .elementor-element.hec-pn-footer__menu .elementor-icon-list-text {
	font-size: 0.9375rem;
	white-space: nowrap;
	color: var(--c-inverse-soft);
}

.elementor .elementor-element.hec-pn-footer__menu a:hover .elementor-icon-list-text {
	color: var(--c-inverse);
}

.elementor-widget-heading.hec-pn-fleet__swipe .elementor-heading-title {
	font: inherit;
	color: inherit;
}

/* =========================================================================
 *  TARJETAS PERSONA NATURAL — beneficios (D2 y M2)
 * ======================================================================= */

/* Chip gris neutro con icono negro (escritorio). */
.elementor .elementor-element.hec-pncard .elementor-icon {
	--icon-size: 26px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background-color: var(--c-panel);
	color: var(--c-ink);
}

.elementor .elementor-element.hec-pncard .elementor-icon-box-title {
	/* 6px + el margen propio del icon-box ≈ 21px visibles: la mitad del
	 * hueco original, como pidió el cliente. */
	margin-block-start: 6px;
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
}

.elementor .elementor-element.hec-pncard .elementor-icon-box-description {
	--box-gap-text: 12px;

	font-size: 0.9375rem;
}

/* Variante móvil: icono naranja suelto a la izquierda. */
.elementor .elementor-element.hec-pncard--row .elementor-icon {
	--icon-size: 44px;

	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--c-accent-start);
}

.elementor .elementor-element.hec-pncard--row .elementor-icon-box-title {
	margin-block-start: 0;
	font-size: 1.375rem;
	font-weight: var(--fw-bold);
}

.elementor .elementor-element.hec-pncard--row .elementor-icon-box-description {
	font-size: var(--fs-lead);
}

.elementor .elementor-element.hec-pn-benefits__grid,
.elementor .elementor-element.hec-pn-benefits__stack {
	margin-block-start: var(--grid-gap-top, 56px);
}

/* El H2 móvil de Persona Natural usa el tamaño display (40px), no el h2. */
.hec-pn-benefits--mobile .elementor-element.hec-section-head__title h2 {
	font-size: var(--fs-display);
}

/**
 * Composición móvil del formulario (M7): línea de progreso decorativa sobre
 * el título —tramo de marca al 25% y resto en gris cálido, como el diseño—,
 * antetítulo pegado al título y aire antes del primer campo.
 */
.elementor .hec-form.hec-only-mobile .e-con.hec-section-head::before {
	content: "";
	/* Elementor posiciona en absoluto los ::before de sus contenedores (los
	 * reserva para overlays); en flujo normal la línea sí ocupa su hueco. */
	position: static;
	inline-size: 100%;
	block-size: 4px;
	margin-block-end: var(--sp-5);
	border-radius: var(--radius-pill);
	background-image: linear-gradient(90deg, var(--c-accent-start) 0%, var(--c-accent-end) 25%, var(--c-cream-alt) 25%);
}

.elementor .hec-form.hec-only-mobile .hec-section-head {
	--head-gap-sub: 10px;
}

.elementor .hec-form.hec-only-mobile .e-con.hec-form__wrap {
	margin-block-start: var(--sp-9);
}

.elementor .elementor-element.hec-cta__actions {
	margin-block-start: var(--cta-gap-actions, 48px);
}

/* La franja de gradiente no lleva contenido: se le da la altura desde aquí
 * porque un contenedor vacío de Elementor colapsa. */
.elementor .elementor-element.hec-gradientbar {
	min-height: 6px;
}

.elementor .elementor-element.hec-benefits__grid {
	margin-block-start: var(--grid-gap-top, 91px);
}

.elementor .elementor-element.hec-solution__grid {
	margin-block-start: var(--grid-gap-top, 68px);
}

.elementor .elementor-element.hec-feature__text {
	margin-block-start: var(--feature-gap-text, 12px);
}

.elementor .elementor-element.hec-process__row,
.elementor .elementor-element.hec-process__stack,
.elementor .elementor-element.hec-solutions__grid,
.elementor .elementor-element.hec-solutions__list {
	margin-block-start: var(--grid-gap-top, 71px);
}

/**
 * Elementor da el 100% de ancho a los contenedores hijos, lo que rompe
 * cualquier fila en la que un elemento fijo deba convivir con otro flexible:
 * el segundo se va a la línea siguiente. Los cuerpos de texto que acompañan a
 * un icono o a un círculo ocupan el espacio restante.
 */
.elementor .elementor-element.hec-step__body,
.elementor .elementor-element.hec-feature__body {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.elementor .elementor-element.hec-step__title {
	margin-block-start: var(--step-gap-title, 29px);
}

.elementor .elementor-element.hec-step__text {
	margin-block-start: var(--step-gap-text, 21px);
}

/* Dentro de la tarjeta el espaciado lo marcan los propios bloques. */
.elementor .elementor-element.hec-card__title {
	margin-block-start: var(--card-gap-title, 13px);
}

.elementor .elementor-element.hec-card__text {
	margin-block-start: var(--card-gap-text, 22px);
}

/* =========================================================================
 *  WIDGET «BOTÓN»
 * ======================================================================= */

/* El envoltorio conserva el aspecto (fondo, radio, altura) y cede el relleno
 * al enlace, que es quien debe cubrir toda el área clicable. */
.elementor-widget.hec-btn {
	width: auto;
	padding-inline: 0;
}

.elementor-widget.hec-btn--block {
	width: 100%;
}

.elementor-widget.hec-btn > .elementor-widget-container {
	display: flex;
	width: 100%;
	height: 100%;
}

.elementor-widget.hec-btn .elementor-button {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--sp-6);
	background: none;
	border: 0;
	border-radius: inherit;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	box-shadow: none;
	fill: currentcolor;
}

.elementor-widget.hec-btn .elementor-button:hover,
.elementor-widget.hec-btn .elementor-button:focus {
	background: none;
	color: inherit;
}

/* El foco se dibuja hacia dentro: el enlace ocupa todo el botón. */
.elementor-widget.hec-btn .elementor-button:focus-visible {
	outline-offset: -3px;
}

/* =========================================================================
 *  WIDGET «CAJA DE ICONO»
 *
 *  Sustituye a los bloques HTML que antes llevaban icono, título y texto.
 *  Con él, el cliente cambia icono, texto y enlace desde el panel, y el icono
 *  puede venir tanto de la biblioteca como de un SVG propio.
 *
 *  Elementor genera:
 *    .elementor-icon-box-wrapper
 *      .elementor-icon-box-icon > .elementor-icon > svg
 *      .elementor-icon-box-content
 *        .elementor-icon-box-title
 *        .elementor-icon-box-description
 * ======================================================================= */

.elementor-widget-icon-box .elementor-icon-box-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	text-align: start;
}

/* Disposición lateral: icono a la izquierda, texto ocupando el resto. */
.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper {
	flex-direction: row;
	gap: var(--sp-5);
}

.elementor-widget-icon-box .elementor-icon-box-icon {
	margin: 0;
	flex: 0 0 auto;
}

.elementor-widget-icon-box .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-accent-start);
	font-size: inherit;
}

.elementor-widget-icon-box .elementor-icon svg {
	width: var(--icon-size, 36px);
	height: var(--icon-size, 36px);
}

.elementor-widget-icon-box .elementor-icon-box-title {
	margin: 0;
	font-size: var(--fs-h3);
	line-height: var(--lh-title);
	color: var(--c-ink);
}

.elementor-widget-icon-box .elementor-icon-box-description {
	margin-block: var(--box-gap-text, 22px) 0;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--c-body);
}

/* --- Tarjeta de beneficios --- */

.hec-card__box .elementor-icon-box-title {
	margin-block-start: var(--card-gap-title, 26px);
}

/* --- Feature: el icono va en un cuadro con el gradiente de marca --- */

.hec-feature__box {
	--icon-size: 24px;
	--box-gap-text: 12px;
}

.hec-feature__box .elementor-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background-image: var(--grad-brand);
	color: var(--c-inverse);
}

.hec-feature__box .elementor-icon-box-title {
	font-size: 1.125rem;
	font-weight: var(--fw-medium);
}

/* --- Tarjetas móviles: el icono va sobre un chip con el gradiente ---
 *
 * Solo en la composición móvil (M3): el diseño de escritorio (D2) lleva el
 * icono suelto en naranja, así que el chip se acota a .hec-benefits--mobile. */

.hec-benefits--mobile .hec-card__box {
	--icon-size: 24px;
}

.hec-benefits--mobile .hec-card__box .elementor-icon {
	/* Chip de 48px medido del PNG de referencia, como el de hec-feature. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background-image: var(--grad-brand);
	color: var(--c-inverse);
}

/* --- Tarjeta oscura: el chip se invierte para conservar contraste --- */

.hec-benefits--mobile .hec-card--dark .elementor-icon {
	background-image: none;
	background-color: var(--c-white);
	color: var(--c-ink);
}

.hec-card--dark .elementor-icon-box-title {
	color: var(--c-inverse);
}

.hec-card--dark .elementor-icon-box-description {
	color: var(--c-inverse-soft);
}

/* --- Respaldo --- */

.hec-backing__box {
	--icon-size: 30px;
	--box-gap-text: 12px;
}

/* --- Ítem de lista de la composición móvil --- */

.hec-listitem {
	--icon-size: 24px;
}

/* La tarjeta (borde, fondo, relleno) la pinta .hec-listitem en el div del
 * widget, a todo el ancho como en el diseño; aquí solo se alinea el interior.
 * Duplicarla en el envoltorio dibujaba dos marcos anidados. */
.hec-listitem .elementor-icon-box-wrapper {
	align-items: center;
	gap: var(--sp-4);
}

.hec-listitem .elementor-icon-box-title {
	font-size: var(--fs-lead);
	font-weight: var(--fw-bold);
	color: var(--c-inverse);
}

/* =========================================================================
 *  WIDGET «LISTA DE ICONOS» — sellos de confianza del hero
 *
 *  El diseño muestra UNA línea sobre los sellos, separada del texto, con los
 *  rótulos en gris y los iconos alineados con ellos.
 *
 *  La línea se dibuja en el envoltorio del widget, no en la lista: la lista y
 *  sus ítems traen bordes propios de Elementor y, sumados al nuestro, salían
 *  dos. Aquí se anulan los suyos y queda solo uno.
 *
 *  El tamaño del icono se fija con la variable que consume el propio widget
 *  () en lugar de con ancho y alto: así no depende
 *  de qué hoja se cargue después.
 * ======================================================================= */

.elementor .hec-trust {
	--e-icon-list-icon-size: 26px;
	--e-icon-list-icon-margin: 0;
	--e-icon-list-icon-align: center;

	padding-block-start: var(--hero-pad-trust, 32px);
	border-block-start: var(--border-w) solid var(--c-border);
}

.elementor .hec-trust .elementor-icon-list-items {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(var(--sp-4), 2.4vw, var(--sp-7));
	margin: 0;
	padding: 0;
	border: 0;
}

.elementor .hec-trust .elementor-icon-list-item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Elementor separa los ítems de la vista en línea con un pseudoelemento. */
.elementor .hec-trust .elementor-icon-list-item::after,
.elementor .hec-trust .elementor-icon-list-item::before {
	display: none;
}

.elementor .hec-trust .elementor-icon-list-icon {
	display: flex;
	align-items: center;
	width: var(--e-icon-list-icon-size);
	height: var(--e-icon-list-icon-size);
	padding: 0;
	color: var(--c-accent-deep);
}

.elementor .hec-trust .elementor-icon-list-icon svg {
	width: var(--e-icon-list-icon-size);
	height: var(--e-icon-list-icon-size);
	fill: none;
	stroke: currentcolor;
}

.elementor .hec-trust .elementor-icon-list-text {
	/* Valores tomados del panel de Figma: Inter Bold 13, interlineado 18.2,
	 * sin tracking y color #1C1B1B. */
	padding-inline-start: 8px;
	padding-block: 0;
	background: transparent;
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--c-ink);
}

/* =========================================================================
 *  TARJETA DE IMAGEN — ahora contenedor con imagen de fondo
 * ======================================================================= */

/**
 * La caja de la tarjeta.
 *
 * `display` y `flex-direction` se declaran aquí a proposito, aunque Elementor
 * ya los emita. Elementor los sirve por variable —`display: var(--display)`—
 * y esas variables viven en el CSS por pagina (`uploads/elementor/css/post-N.css`),
 * que el EDITOR no carga: alli los estilos los pinta su JavaScript. Cuando la
 * variable no esta, `display` se queda sin valor, la tarjeta deja de ser flex y
 * `justify-content` no hace nada, asi que el contenido se sube al borde
 * superior. Declarandolo nosotros, la tarjeta se comporta igual en el editor,
 * en la pagina publica y ante cualquier fallo de generacion del CSS.
 */
.elementor .e-con.hec-imgcard {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	/* El contenido se apoya abajo, sobre la parte densa del velo. */
	justify-content: flex-end;
	min-height: 384px;
}

/* El velo va sobre la imagen de fondo del contenedor y bajo su contenido. */
.e-con.hec-imgcard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 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%
	);
}

/**
 * El contenido va por encima del velo.
 *
 * Apunta al cuerpo, NO a `> *`. El universal fue un error que costo caro: en el
 * editor, Elementor inyecta como hijos directos del contenedor su capa de
 * seleccion, dos `elementor-shape` y el tirador de redimensionado. El selector
 * universal les ganaba en especificidad a los estilos del propio Elementor y
 * los pasaba a `position: relative`, metiendolos en el flujo del flex.
 *
 * El tirador mide 101px de alto. Sumado al cuerpo y a las separaciones, llenaba
 * exactamente el alto util de la tarjeta: sin espacio libre, `justify-content:
 * flex-end` no tenia nada que repartir y `margin-block-start: auto` resolvia a
 * 0. Por eso el editor mostraba el texto arriba y la pagina publica abajo, con
 * el mismo CSS y la misma estructura.
 *
 * Acotandolo a nuestro contenido, la interfaz del editor conserva su
 * posicionamiento absoluto, no ocupa alto, y editor y pagina coinciden.
 */
.e-con.hec-imgcard > .hec-imgcard__body {
	position: relative;
	z-index: 1;
}

.hec-imgcard .hec-imgcard__title,
.hec-imgcard .hec-imgcard__title .elementor-heading-title {
	color: var(--c-inverse);
}

.hec-imgcard .hec-imgcard__text {
	color: var(--c-inverse);
	font-size: var(--fs-body);
	line-height: 1.5;
}

/**
 * El cuerpo de la tarjeta: titulo, texto y enlace agrupados.
 *
 * Se apoya abajo y no llega al borde derecho: deja ver la foto.
 *
 * El 70% sale de medir el diseno, no de estimarlo a ojo. Sobre la caja de
 * contenido de la tarjeta —564 menos los 40 de padding a cada lado, o sea
 * 484px— la linea mas larga del parrafo mide 341px, que son el 70,5%. Estuvo
 * en 62% y rompia una linea antes que el diseno.
 *
 * Las dos propiedades van sobre el contenedor `__body`, no sobre cada widget
 * suelto: asi el bloque se limita y se desplaza como una unidad, y se puede
 * recolocar desde Elementor sin tocar CSS.
 *
 * `margin-block-start: auto` es redundante con el `justify-content: flex-end`
 * del contenedor y se mantiene a proposito, como red de seguridad: no depende
 * de esa propiedad y aguanta cambios de altura de la tarjeta.
 */
.elementor .e-con.hec-imgcard > .hec-imgcard__body {
	display: flex;
	flex-direction: column;
	max-width: 70%;
	margin-block-start: auto;
}

/* El enlace con flecha, ahora widget «Botón», conserva su aspecto de enlace. */
.elementor-widget.hec-link-arrow .elementor-button {
	justify-content: flex-start;
	padding: 0;
	background: none;
	color: var(--c-accent-start);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
}

.elementor-widget.hec-link-arrow {
	min-height: 0;
	background: none;
	box-shadow: none;
}

.elementor-widget.hec-link-arrow .elementor-button::after {
	content: "";
	width: 18px;
	height: 10px;
	margin-inline-start: var(--sp-2);
	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;
}

/* =========================================================================
 *  WIDGETS DE TEXTO
 * ======================================================================= */

/* El título del widget «Título» conserva su propio tamaño (el de h1, h2… en
 * base.css); solo se le quita el margen, que ya gobierna el envoltorio.
 *
 * OJO: no poner `font-size: inherit` aquí. Heredaría el tamaño del envoltorio
 * —el del cuerpo— y aplastaría todos los encabezados. */
.elementor-widget-heading .elementor-heading-title {
	margin: 0;
}

/* Elementor impone `line-height: 1` a sus títulos con un selector de dos
 * clases, que gana a las reglas de elemento de base.css. Estas reglas
 * devuelven a cada nivel su interlineado del diseño: la especificidad sube a
 * 0-2-1 gracias al selector de etiqueta. */
.elementor-widget-heading h1.elementor-heading-title {
	line-height: var(--lh-display);
}

.elementor-widget-heading h2.elementor-heading-title {
	line-height: var(--lh-heading);
}

.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
	line-height: var(--lh-title);
}

/* Cuando el envoltorio SÍ define la tipografía —caso del antetítulo, que no es
 * un encabezado sino un párrafo con estilo propio— el título debe heredarla.
 * Se suman los envoltorios de Persona Natural que definen la suya: el color
 * puesto en el div del widget nunca alcanza al hN de dentro, porque base.css
 * lo fija en el elemento (misma trampa que el H1 del hero partido). */
.elementor-widget-heading.hec-eyebrow .elementor-heading-title,
.elementor-widget-heading.hec-step__title .elementor-heading-title,
.elementor-widget-heading.hec-pn-process__num .elementor-heading-title,
.elementor-widget-heading.hec-pn-process__title .elementor-heading-title,
.elementor-widget-heading.hec-chip .elementor-heading-title,
.elementor-widget-heading.hec-hero-split__caption .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* Evita el margen sobrante del último párrafo del editor de texto. */
.elementor-widget-text-editor > .elementor-widget-container > *:last-child {
	margin-block-end: 0;
}

/* =========================================================================
 *  SELLOS DEL HERO — ajuste final del icono
 *
 *  Elementor dimensiona el SVG con `var(--e-icon-list-icon-size, 1em)` y le
 *  añade un margen derecho calculado sobre esa misma variable
 *  (`0 calc(size * .25) 0 0`), al que suma otros 5px de relleno en el rótulo.
 *  De ahí que el icono saliera pequeño y muy separado del texto.
 *
 *  Se fija el tamaño en el propio SVG y se anulan margen y relleno para dejar
 *  solo la separación del diseño. El selector incluye la etiqueta `svg` para
 *  superar la regla de Elementor sin recurrir a !important.
 * ======================================================================= */

.elementor .hec-trust .elementor-icon-list-icon svg {
	/* Solo se anula el margen que Elementor calcula sobre el tamano; la
	 * medida viene del ajuste del widget, editable desde el panel. */
	margin: 0;
}

.elementor .hec-trust .elementor-icon-list-icon + .elementor-icon-list-text {
	padding-inline-start: 8px;
}

/* La vista en línea de Elementor separa los ítems con márgenes laterales
 * negativos; aquí la separación la marca el `gap` de la lista. */
.elementor .hec-trust .elementor-icon-list-items.elementor-inline-items {
	margin-inline: 0;
}

.elementor .hec-trust .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	margin-inline: 0;
}

/* =========================================================================
 *  FRANJA DE CONFIANZA EN MARQUESINA — hero móvil (M1)
 *
 *  En el diseño la lista de sellos aparece cortada por el borde de la
 *  pantalla: desborda a propósito. Aquí además se desplaza sola hacia la
 *  izquierda en bucle. El módulo trust-marquee.js clona los ítems para que
 *  el bucle sea continuo, fija distancia y duración en variables y marca la
 *  lista con `is-running`. Sin JavaScript —o con «reducir movimiento»
 *  activo— la franja queda estática, fiel a la imagen de referencia.
 * ======================================================================= */

.elementor .elementor-element.hec-trust--marquee {
	/* Sangra el relleno lateral del hero para que los filetes y el corte de
	 * los sellos lleguen al borde de la pantalla, como en el diseño. */
	margin-block-start: var(--sp-7);
	margin-inline: calc(var(--sp-5) * -1);
	padding-block: var(--sp-7);
	border-block-end: var(--border-w) solid var(--c-border);
	overflow: hidden;
}

.elementor .elementor-element.hec-trust--marquee .elementor-icon-list-items {
	flex-wrap: nowrap;
	gap: var(--sp-9);
	width: max-content;
}

.elementor .elementor-element.hec-trust--marquee .elementor-icon-list-item {
	/* Elementor parte las palabras de los ítems en línea (word-break) y eso
	 * encoge el ancho intrínseco que usa la marquesina. En una cinta en
	 * movimiento el texto nunca se parte. */
	flex: 0 0 auto;
	word-break: normal;
}

.elementor .elementor-element.hec-trust--marquee .elementor-icon-list-icon {
	color: var(--c-muted-inv);
}

.elementor .elementor-element.hec-trust--marquee .elementor-icon-list-text {
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
	text-transform: none;
	white-space: nowrap;
	color: var(--c-muted-inv);
}

.elementor .elementor-element.hec-trust--marquee .elementor-icon-list-items.is-running {
	animation: hec-marquee var(--hec-marquee-duration, 24s) linear infinite;
}

/* Cortesía táctil y de teclado: el movimiento se detiene al interactuar. */
.elementor .elementor-element.hec-trust--marquee:hover .elementor-icon-list-items,
.elementor .elementor-element.hec-trust--marquee:focus-within .elementor-icon-list-items {
	animation-play-state: paused;
}

@keyframes hec-marquee {
	to {
		transform: translateX(calc(var(--hec-marquee-distance, 50%) * -1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .elementor-element.hec-trust--marquee .elementor-icon-list-items {
		animation: none;
	}
}

/* =========================================================================
 *  CAJA DE ICONO — alineación del icono con el texto
 *
 *  Elementor centra el icono con `align-items: unset !important` y
 *  `text-align: center` en el envoltorio. El texto ya se alinea desde los
 *  ajustes del widget, pero el icono es inline-block y seguía el text-align
 *  heredado, quedando descolgado del borde del texto.
 * ======================================================================= */

.elementor .elementor-widget-icon-box .elementor-icon-box-icon {
	display: flex;
	justify-content: flex-start;
	text-align: start;
}

.elementor .elementor-widget-icon-box .elementor-icon {
	margin-inline: 0;
}

/* La tarjeta de imagen y su cuerpo se resuelven arriba, en su propia sección.
 * Aquí hubo una regla que empujaba el primer widget con un margen automático y
 * culpaba a Elementor de que `justify-content` no funcionara. La causa real era
 * un `display: block` heredado del marcado antiguo en components.css, que
 * convertía la tarjeta en caja de bloque y anulaba toda propiedad de flex. */

/* =========================================================================
 *  AJUSTES PEDIDOS POR EL CLIENTE — Persona Natural (15-09-2026)
 * ======================================================================= */

/* Beneficios (D2): los iconos dejan el chip gris con icono negro y pasan al
 * cuadro con degradado de marca e icono blanco, como en Persona Jurídica
 * (hec-feature__box). Misma especificidad que la regla original; gana por
 * orden de carga. */
.elementor .elementor-element.hec-pncard .elementor-icon {
	--icon-size: 24px;

	background-color: transparent;
	background-image: var(--grad-brand);
	color: var(--c-inverse);
}

/* Cuota (D4): los subtítulos (Matrícula, Impuestos…) van en negrita. */
.elementor .elementor-element.hec-pn-quota__box .elementor-icon-box-title {
	font-weight: var(--fw-bold);
}

/* Módulo promocional (D5): pilares con icono blanco y rótulo en negrita. */
.elementor .elementor-element.hec-pn-promo__pillar {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.elementor .elementor-element.hec-pn-promo__pillar .elementor-icon-box-wrapper {
	align-items: center;
	text-align: center;
}

.elementor .elementor-element.hec-pn-promo__pillar .elementor-icon-box-icon {
	justify-content: center;
}

.elementor .elementor-element.hec-pn-promo__pillar .elementor-icon {
	--icon-size: 30px;

	color: var(--c-inverse);
}

.elementor .elementor-element.hec-pn-promo__pillar .elementor-icon-box-title {
	margin-block-start: var(--sp-3);
	font-size: 1.0625rem;
	font-weight: var(--fw-bold);
	color: var(--c-inverse);
}

.elementor .elementor-element.hec-pn-promo__title h2 {
	font-size: 2rem;
	line-height: 1.1;
	color: var(--c-inverse);
}

.elementor .elementor-element.hec-pn-promo__text {
	color: var(--c-inverse-soft);
}

/* Los botones del módulo se anclan abajo, como hacía la ficha anterior. */
.elementor .e-con.hec-pn-promo__actions {
	margin-block-start: auto;
}

/* Pie: el logotipo sustituye al nombre en texto. */
.elementor .elementor-element.hec-footer__logo {
	text-align: start;
}

.elementor .elementor-element.hec-footer__logo img {
	width: 168px;
	height: auto;
}

/* Formulario móvil (M8): cabecera propia antes del formulario de registro. */
.hec-pn-form--mobile .elementor-element.hec-section-head__title h2 {
	font-size: var(--fs-display);
}

/* =========================================================================
 *  FORMULARIO DE REGISTRO (D8) — tarjeta de alto fijo con desplazamiento
 *
 *  Pedido del cliente (15-09-2026). Con el formulario de registro completo,
 *  la tarjeta partida crecía hasta ~1500px y la foto de la derecha, que es
 *  un fondo «cover» de 1152×1512, se escalaba por encima de su tamaño y se
 *  veía pixelada. Con la altura acotada la foto ya no se amplía, y la
 *  columna del formulario se desplaza por dentro: título y subtítulo quedan
 *  fijos y solo se mueven los campos.
 *
 *  Solo escritorio: la composición móvil no lleva foto y un scroll dentro
 *  del scroll de la página sería incómodo en pantalla táctil.
 * ======================================================================= */

.elementor .e-con.hec-pn-form__card {
	height: 760px;
}

/* La columna es un contenedor flex en columna: sin min-height:0 el hijo
 * desplazable no puede encoger y desborda la tarjeta en vez de desplazarse. */
.elementor .e-con.hec-pn-form__col {
	min-height: 0;
}

.elementor .e-con.hec-pn-form__col > .elementor-widget-cc_lead_form {
	flex: 1 1 auto;
	min-height: 0;
	padding-inline-end: var(--sp-3);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: var(--c-accent-start) var(--c-cream-alt);
}

.elementor .e-con.hec-pn-form__col > .elementor-widget-cc_lead_form::-webkit-scrollbar {
	width: 8px;
}

.elementor .e-con.hec-pn-form__col > .elementor-widget-cc_lead_form::-webkit-scrollbar-track {
	background-color: var(--c-cream-alt);
	border-radius: var(--radius-pill);
}

.elementor .e-con.hec-pn-form__col > .elementor-widget-cc_lead_form::-webkit-scrollbar-thumb {
	background-image: var(--grad-brand);
	border-radius: var(--radius-pill);
}

/* Aire al final para que el botón no quede pegado al borde de la caja. */
.elementor .e-con.hec-pn-form__col > .elementor-widget-cc_lead_form .cc-form--natural {
	padding-block-end: var(--sp-2);
}

/* Cierre (D9): subtítulo bajo el título, en blanco y centrado, y un poco
 * más de aire antes de los botones (pedido del cliente, 15-09-2026). */
.elementor .elementor-element.hec-pn-cta__text {
	max-width: 520px;
	font-size: var(--fs-lead);
	line-height: 1.5;
	text-align: center;
	color: var(--c-inverse);
}

.elementor .hec-pn-cta .elementor-element.hec-pn-cta__text + .e-con {
	margin-block-start: var(--sp-4);
}

/* El título del cierre parte en dos líneas como en la referencia del cliente:
 * la regla de components.css (0-1-0) perdía contra el max-width:100% que
 * Elementor pone a todo widget con `.elementor.elementor .e-con > .elementor-widget`
 * (0-4-0, en las dos variantes: directo o vía .e-con-inner en la sección
 * «boxed»). El contenedor con clase sube estos selectores a 0-5-0. */
.elementor .hec-pn-cta.e-con > .elementor-element.hec-pn-cta__title,
.elementor .hec-pn-cta .e-con-inner > .elementor-element.hec-pn-cta__title {
	max-width: 620px;
}

/* =========================================================================
 *  PERSONA JURÍDICA — puentes de la composición responsive (15-09-2026)
 * ======================================================================= */

/* Los títulos de las tarjetas y de los bloques de icono van en negrita. */
.elementor .elementor-element.hec-card__box .elementor-icon-box-title,
.elementor .elementor-element.hec-feature__box .elementor-icon-box-title {
	font-weight: var(--fw-bold);
}

/* Los antetítulos (widget «Título» con la clase del antetítulo) heredan la
 * tipografía del envoltorio y se centran con la cabecera. */
.hec-section-head--center .elementor-element.hec-eyebrow {
	text-align: center;
}

/* Botón al cierre de la sección del canon y del proceso. */
.elementor .e-con.hec-solution__actions {
	margin-block-start: var(--sp-8);
}

.elementor .e-con.hec-pn-process__actions {
	margin-block-start: var(--sp-9);
}

/* Las cifras de la infografía: el widget «Título» hereda de .hec-stat__num. */
.elementor-widget-heading.hec-stat__num .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.elementor .elementor-element.hec-stat__label {
	margin-block-start: var(--sp-3);
}

.elementor .e-con.hec-stats__grid {
	margin-block-start: var(--sp-8);
}

.elementor .e-con.hec-stats__actions {
	margin-block-start: var(--sp-4);
}

/* El h2 del cierre y del texto del cierre, centrados y en blanco. */
.elementor .elementor-element.hec-cta__text {
	text-align: center;
}

/* Tarjetas de imagen: tres por fila; la altura la da la proporción. */
.elementor .e-con.hec-imgcard {
	min-height: 0;
}

/* --- Ajustes por debajo del punto de corte (≤1024px) --- */
@media (max-width: 1024px) {
	/* Proceso: cada paso pasa a fila (círculo + título) con el texto debajo. */
	.elementor .e-con.hec-pj-process .e-con.hec-pn-process__col {
		--flex-direction: row;
		--flex-wrap: wrap;
		--align-items: center;
		--justify-content: flex-start;
		--gap: 8px 16px;
	}

	.hec-pj-process .elementor-element.hec-pn-process__num {
		flex: 0 0 auto;
		width: auto;
	}

	.hec-pj-process .elementor-element.hec-pn-process__title {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		text-align: start;
	}

	.hec-pj-process .elementor-element.hec-pn-process__text {
		flex: 1 1 100%;
		width: 100%;
		max-width: none;
		margin: 0;
		padding-inline-start: 60px;
		text-align: start;
	}

	.hec-pj-process .hec-pn-process__row::before {
		display: none;
	}

	.hec-pj-process .elementor-element.hec-pn-process__row {
		margin-block-start: var(--sp-7);
	}

	/* Rejillas: menos aire sobre las tarjetas en pantallas pequeñas. */
	.elementor .elementor-element.hec-benefits__grid {
		--grid-gap-top: 40px;
	}

	.elementor .elementor-element.hec-solution__grid {
		--grid-gap-top: 32px;
	}

	/* El hero apila texto y foto; la foto no necesita sombra tan grande. */
	.elementor .e-con.hec-hero__media {
		margin-block-start: var(--sp-6);
	}

	/* El formulario ocupa todo el ancho. */
	.elementor .e-con.hec-form__wrap,
	.elementor .hec-form .e-con.hec-section-head {
		max-width: none;
	}

	/* Botones del cierre a todo el ancho. */
	.elementor .e-con.hec-cta__actions > .elementor-widget.hec-btn {
		width: 100%;
	}

	.hec-cta .hec-btn {
		min-height: 56px;
		padding-inline: var(--sp-6);
	}
}

/* Persona Jurídica, ajustes tras la primera captura (15-09-2026). */

/* El relleno vertical lo dan SOLO los ajustes del contenedor (como en el
 * hero): la clase genérica .hec-section sumaba otros 96px por arriba y por
 * abajo, y el cliente pidió menos aire. */
.elementor .e-con.hec-section {
	padding-block: 0;
}

.elementor .elementor-element.hec-benefits__grid {
	--grid-gap-top: 48px;
}

.elementor .elementor-element.hec-solution__grid {
	--grid-gap-top: 40px;
}

/* Tres fichas por fila: la altura mínima manda y el cuerpo usa todo el ancho. */
.elementor .e-con.hec-imgcard {
	aspect-ratio: auto;
	min-height: 384px;
}

.elementor .e-con.hec-imgcard > .hec-imgcard__body {
	max-width: 100%;
}

@media (max-width: 1024px) {
	.elementor .e-con.hec-imgcard {
		min-height: 300px;
	}

	/* El círculo del paso conserva sus 44px al pasar a fila. */
	.hec-pj-process .elementor-element.hec-pn-process__num {
		flex: 0 0 44px;
		width: 44px;
	}
}