/* ARRA — Las landing de campaña (plantilla `landing`, inc/landing.php).
 * ==========================================================================
 * Todo cuelga de los colores de la LÍNEA -`--arra-linea`, `-fuerte`,
 * `-honda`-, que pone el body: en Core salen en verde, y el día que haya una
 * landing de Corporate saldrá en granate sin tocar esta hoja. El dorado es
 * el de siempre. Primero el móvil: es de donde llega casi todo el tráfico de
 * un anuncio.
 * ========================================================================== */

.arra-lp-main { background: var(--wp--preset--color--blanco); }
.arra-lp { --lp-ancho: 1200px; --lp-lado: clamp(20px, 5vw, 56px); color: var(--fg); }
.arra-lp :where(h1, h2, h3, p, ul, ol) { margin: 0; }

/* ---------------------------------------------------------- cabecera */
.arra-lp-cabecera { position: sticky; inset-block-start: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 10px var(--lp-lado, 20px); background: var(--arra-linea-honda);
	box-shadow: 0 8px 24px -16px rgba(6, 11, 19, 0.6); }
/* En ARRA Asesores (la genérica: /contacto/gracias/) no hay color de línea y
   salía el burdeos por defecto. Va como la barra de su menú: gris claro. */
.arra-lp-cabecera--generica { background: var(--nav-light, var(--wp--preset--color--neutro-200));
	box-shadow: 0 8px 24px -16px rgba(6, 11, 19, 0.25); }
.arra-lp-cabecera__logo img { display: block; block-size: 34px; inline-size: auto; }
.arra-lp-cabecera__telefono { display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border-radius: 12px; text-decoration: none;
	background: var(--wp--preset--color--dorado-500); color: var(--wp--preset--color--carbon-950);
	font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
	transition: background-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
		color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
.arra-lp-cabecera__telefono svg { inline-size: 16px; block-size: 16px; fill: none;
	stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
	.arra-lp-cabecera__telefono:hover { background: var(--wp--preset--color--blanco); }
}

/* ------------------------------------------------------------- héroe */
.arra-lp-heroe { position: relative; isolation: isolate; overflow: hidden;
	padding: clamp(36px, 7vw, 96px) var(--lp-lado) clamp(40px, 7vw, 96px); }
.arra-lp-heroe__foto, .arra-lp-heroe__foto img { position: absolute; inset: 0; z-index: -2;
	inline-size: 100%; block-size: 100%; }
.arra-lp-heroe__foto img { object-fit: cover; animation: arra-kenburns 18s ease-in-out infinite alternate; }
.arra-lp-heroe__velo { position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--arra-linea-honda) 94%, transparent) 0%,
		color-mix(in srgb, var(--arra-linea-honda) 86%, transparent) 55%,
		color-mix(in srgb, var(--arra-linea-honda) 70%, transparent) 100%); }
.arra-lp-heroe__dentro { max-inline-size: var(--lp-ancho); margin-inline: auto;
	display: grid; gap: 32px; align-items: center; grid-template-columns: minmax(0, 1fr); }
/* Un <select> mide lo que su opción más larga: sin tope, empujaba la
   columna entera fuera de la pantalla en el móvil. */
.arra-lp-formulario, .arra-lp-formulario .wpcf7, .arra-lp-formulario .wpcf7-form { min-inline-size: 0; }
.arra-lp-formulario select { max-inline-size: 100%; text-overflow: ellipsis; }
@media (min-width: 980px) {
	.arra-lp-heroe__dentro { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); gap: 64px; }
}
.arra-lp-heroe__texto { color: var(--wp--preset--color--blanco); display: grid; gap: 18px; }
.arra-lp .arra-lp-antetitulo { color: var(--wp--preset--color--dorado-300); }
.arra-lp .arra-lp-titulo { color: var(--wp--preset--color--blanco); font-family: var(--font-display); font-weight: 500;
	font-size: clamp(32px, 5.2vw, 56px); line-height: 1.06; letter-spacing: -0.03em; }
.arra-lp .arra-lp-titulo span { display: block; inline-size: fit-content; color: var(--wp--preset--color--dorado-300); }
.arra-lp-entradilla { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--blanco) 86%, transparent); max-inline-size: 56ch; }
.arra-lp-ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
.arra-lp-ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px;
	align-items: start; font-size: 15.5px; line-height: 1.5; }
.arra-lp-tick { inline-size: 22px; block-size: 22px; border-radius: 50%; padding: 4px;
	box-sizing: border-box; background: var(--wp--preset--color--dorado-500);
	fill: none; stroke: var(--wp--preset--color--carbon-950); stroke-width: 3;
	stroke-linecap: round; stroke-linejoin: round; }
.arra-lp-heroe__telefono { justify-self: start; color: var(--wp--preset--color--blanco);
	font-size: 15px; text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado-500);
	text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* ------------------------------------------------------- formulario */
.arra-lp-formulario { scroll-margin-block-start: 96px; background: var(--wp--preset--color--blanco);
	color: var(--fg); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px);
	border-block-start: 4px solid var(--wp--preset--color--dorado-500);
	box-shadow: 0 2px 4px rgba(6, 11, 19, 0.08), 0 30px 60px -20px rgba(6, 11, 19, 0.55); }
.arra-lp-formulario__titulo { font-family: var(--font-display); font-weight: 500;
	font-size: 22px; letter-spacing: -0.015em; line-height: 1.25; }
.arra-lp-formulario__texto { margin-block-start: 6px; font-size: 14.5px; line-height: 1.55; color: var(--fg-soft); }
.arra-lp-formulario__nota { margin-block-start: 12px; font-size: 13px; color: var(--fg-soft); text-align: center; }
.arra-lp-formulario .wpcf7 { margin-block-start: 18px; }
.arra-lp-formulario .wpcf7-form { display: grid; gap: 12px; }
.arra-lp-formulario .wpcf7-form > p { margin: 0; }
.arra-lp-formulario label { display: grid; gap: 6px; font-size: 13px; font-weight: 600;
	letter-spacing: 0.02em; color: var(--fg); }
.arra-lp-formulario .wpcf7-form-control-wrap { display: block; }
.arra-lp-formulario :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	box-sizing: border-box; inline-size: 100%; min-block-size: 48px; padding: 11px 14px;
	border: 1px solid var(--wp--preset--color--neutro-400); border-radius: 12px;
	background: var(--wp--preset--color--blanco); color: var(--fg);
	font: 400 16px/1.4 var(--font-body);
	transition: border-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
		box-shadow var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
.arra-lp-formulario textarea { min-block-size: 88px; resize: vertical; }
.arra-lp-formulario :is(input, select, textarea):focus-visible { outline: none;
	border-color: var(--wp--preset--color--dorado-700);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--dorado-300) 60%, transparent); }
.arra-lp-formulario .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start;
	font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--fg-soft); }
.arra-lp-formulario .wpcf7-acceptance input { inline-size: 18px; block-size: 18px; margin: 1px 0 0;
	accent-color: var(--wp--preset--color--dorado-700); flex: none; }
.arra-lp-formulario .wpcf7-list-item { margin: 0; }
.arra-lp-formulario a { color: var(--fg); text-decoration-color: var(--wp--preset--color--dorado-500);
	text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.arra-lp-formulario .wpcf7-submit { inline-size: 100%; min-block-size: 52px; border: 0; cursor: pointer;
	border-radius: 14px; background: var(--wp--preset--color--dorado-500);
	color: var(--wp--preset--color--carbon-950); font: 600 13px/1 var(--font-body);
	letter-spacing: 0.12em; text-transform: uppercase;
	transition: background-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
		color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
@media (hover: hover) {
	.arra-lp-formulario .wpcf7-submit:hover { background: var(--wp--preset--color--carbon-950);
		color: var(--wp--preset--color--blanco); }
}
.arra-lp-formulario .wpcf7-submit:active { transform: translateY(1px); }
.arra-lp-formulario .wpcf7-spinner { margin: 8px auto 0; display: block; }
.arra-lp-formulario .wpcf7-not-valid-tip { font-size: 12.5px; font-weight: 500; margin-block-start: 4px;
	color: var(--wp--preset--color--burdeos-700); }
.arra-lp-formulario .wpcf7-response-output { margin: 4px 0 0 !important; padding: 10px 12px !important;
	border-radius: 10px; font-size: 13.5px; }

/* --------------------------------------------------------- pruebas */
.arra-lp-pruebas { background: var(--wp--preset--color--neutro-100);
	border-block-end: 1px solid var(--arra-line-soft); padding: 26px var(--lp-lado); }
.arra-lp-pruebas ul { list-style: none; padding: 0; max-inline-size: var(--lp-ancho); margin: 0 auto;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
@media (min-width: 860px) { .arra-lp-pruebas ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.arra-lp-pruebas li { display: grid; gap: 2px; padding-inline-start: 14px;
	border-inline-start: 2px solid var(--wp--preset--color--dorado-500); }
.arra-lp-pruebas strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.4vw, 26px);
	letter-spacing: -0.02em; color: var(--arra-linea-fuerte); line-height: 1.2; }
.arra-lp-pruebas span { font-size: 13.5px; line-height: 1.45; color: var(--fg-soft); }

/* -------------------------------------------------------- secciones */
.arra-lp-seccion { padding: clamp(56px, 8vw, 104px) var(--lp-lado); }
.arra-lp-seccion > * { max-inline-size: var(--lp-ancho); margin-inline: auto; }
.arra-lp-seccion--gris { background: var(--wp--preset--color--neutro-100); }
.arra-lp-seccion .arra-lp-encabezado { display: grid; gap: 12px; justify-items: center;
	max-inline-size: 760px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.arra-lp-seccion h2, .arra-lp-cierre h2 { font-family: var(--font-display); font-weight: 500;
	font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -0.025em; }
.arra-lp-seccion h2 span { color: var(--arra-linea); }
.arra-lp-seccion .arra-lp-encabezado p:not(.arra-kicker) { font-size: 16.5px; line-height: 1.65; color: var(--fg-soft); }

/* Qué incluye: filas con tick, a dos columnas en cuanto caben. */
.arra-lp-incluye { list-style: none; padding: 0; display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.arra-lp-incluye li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start;
	padding: 16px 18px; border-radius: 14px; background: var(--wp--preset--color--blanco);
	border: 1px solid var(--arra-line-soft); }
.arra-lp-incluye li > div { display: grid; gap: 3px; }
.arra-lp-incluye strong { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.3; }
.arra-lp-incluye span { font-size: 15px; line-height: 1.55; color: var(--fg-soft); }

/* Pasos: la línea de proceso de la web (m6, paginas.css), que en el móvil
   se pone de pie y se rellena con el scroll (avance.js). Aquí solo lo que
   cambia por ir en una landing:
   · sin el margen de arriba, que ya lo pone el encabezado;
   · las cajas en BLANCO, porque la sección va en la banda gris y el
     `neutro-200` de la web desaparece sobre ella (regla de la casa: sobre la
     banda gris la ficha va en blanco);
   · la etiqueta del plazo en el color de la línea y no en dorado: el
     dorado-700 a 11 px daba 3,48:1 (axe, 27/09). */
.arra-lp .arra-proceso { margin-block-start: 0; }
.arra-lp-seccion--gris .arra-proceso__caja { background: var(--wp--preset--color--blanco); }
.arra-lp .arra-proceso__etapa { font-weight: 600;
	color: var(--arra-linea-honda, var(--wp--preset--color--tinta-900)); }
.arra-lp-nota { margin-block-start: 18px !important; text-align: center; font-size: 14px; color: var(--fg-soft); }

/* Tarjetas: packs o precio. */
.arra-lp-tarjetas { display: grid; gap: 16px; align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.arra-lp-tarjeta { position: relative; display: grid; gap: 12px; align-content: start;
	grid-template-rows: auto auto auto 1fr auto;
	padding: 26px 24px; border-radius: var(--r-lg); background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--neutro-400); }
.arra-lp-tarjeta--destacada { border: 2px solid var(--wp--preset--color--dorado-500);
	box-shadow: 0 24px 50px -28px rgba(6, 11, 19, 0.45); }
.arra-lp-tarjeta__sello { position: absolute; inset-block-start: -12px; inset-inline-start: 22px;
	padding: 5px 12px; border-radius: 999px; background: var(--wp--preset--color--dorado-500);
	color: var(--wp--preset--color--carbon-950); font-size: 11px; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase; }
.arra-lp-tarjeta h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.015em; }
.arra-lp-tarjeta .arra-lp-tarjeta__precio { font-family: var(--font-display); font-weight: 500; font-size: 34px;
	letter-spacing: -0.03em; color: var(--arra-linea-fuerte); }
.arra-lp-tarjeta > p { font-size: 15px; line-height: 1.6; color: var(--fg-soft); }
.arra-lp-tarjeta ul { list-style: none; padding: 0; display: grid; gap: 8px; align-content: start; }
.arra-lp-tarjeta li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px;
	font-size: 15px; line-height: 1.5; }
.arra-lp-tarjeta .arra-cta-solido { justify-content: center; margin-block-start: 8px; }
/* Cuatro tarjetas (con el Pack Emprende, 26/09/2026): dos y dos hasta que
   caben las cuatro en fila, en vez de tres y una suelta. */
@media (min-width: 700px) and (max-width: 1239px) {
	.arra-lp-tarjetas:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
	.arra-lp-tarjetas:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* La tarjeta se levanta y una luz dorada sigue al cursor (landing.js pone
   --lp-x y --lp-y). Detrás del texto: `isolation` y z-index negativo. */
.arra-lp-tarjeta { isolation: isolate;
	transition: transform 320ms var(--wp--custom--movimiento--salida),
		box-shadow 320ms var(--wp--custom--movimiento--salida); }
.arra-lp-tarjeta::before { content: ""; position: absolute; inset: 0; z-index: -1;
	border-radius: inherit; pointer-events: none; opacity: 0;
	background: radial-gradient(380px circle at var(--lp-x, 50%) var(--lp-y, 50%),
		color-mix(in srgb, var(--wp--preset--color--dorado-300) 26%, transparent), transparent 70%);
	transition: opacity 260ms var(--wp--custom--movimiento--salida); }
@media (hover: hover) {
	.arra-lp-tarjeta:hover { transform: translateY(-4px);
		box-shadow: 0 30px 50px -30px rgba(6, 11, 19, 0.35); }
	.arra-lp-tarjeta:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.arra-lp-tarjeta { transition: none; }
	.arra-lp-tarjeta:hover { transform: none; }
}

/* Preguntas. */
.arra-lp-faq { max-inline-size: 820px !important; display: grid; }
.arra-lp-faq details { border-block-end: 1px solid var(--wp--preset--color--neutro-400); }
.arra-lp-faq summary { list-style: none; cursor: pointer; display: grid;
	grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center;
	padding: 20px 0; font-family: var(--font-display); font-weight: 500; font-size: 17.5px; line-height: 1.35; }
.arra-lp-faq summary::-webkit-details-marker { display: none; }
.arra-lp-faq summary::after { content: ""; inline-size: 28px; block-size: 28px; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--dorado-500);
	background: linear-gradient(var(--wp--preset--color--dorado-700), var(--wp--preset--color--dorado-700)) center / 12px 2px no-repeat,
		linear-gradient(var(--wp--preset--color--dorado-700), var(--wp--preset--color--dorado-700)) center / 2px 12px no-repeat;
	transition: transform var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
.arra-lp-faq details[open] summary::after { transform: rotate(45deg); }
.arra-lp-faq details p { padding-block-end: 20px; font-size: 15.5px; line-height: 1.7; color: var(--fg-soft); max-inline-size: 70ch; }

/* ------------------------------------------------------------ cierre */
.arra-lp-cierre { background: var(--arra-linea-honda); color: var(--wp--preset--color--blanco);
	padding: clamp(56px, 8vw, 96px) var(--lp-lado); text-align: center; }
.arra-lp .arra-lp-cierre h2 { color: var(--wp--preset--color--blanco); }
.arra-lp-cierre > div { max-inline-size: 760px; margin-inline: auto; display: grid; gap: 16px; justify-items: center; }
.arra-lp-cierre p { font-size: 17px; line-height: 1.6; color: color-mix(in srgb, var(--wp--preset--color--blanco) 84%, transparent); }
.arra-lp-cierre__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block-start: 8px; }
.arra-lp-boton { display: inline-flex; align-items: center; justify-content: center; min-block-size: 52px;
	padding: 0 24px; border-radius: 14px; text-decoration: none; font: 600 13px/1 var(--font-body);
	letter-spacing: 0.12em; text-transform: uppercase;
	background: var(--wp--preset--color--dorado-500); color: var(--wp--preset--color--carbon-950);
	border: 1px solid var(--wp--preset--color--dorado-500);
	transition: background-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
		color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
.arra-lp-boton--linea { background: transparent; color: var(--wp--preset--color--blanco); }
@media (hover: hover) {
	.arra-lp-boton:hover { background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--carbon-950);
		border-color: var(--wp--preset--color--blanco); }
}

/* -------------------------------------------------------------- pie */
/* En NEGRO, como el pie del resto de la web (cliente, 28/09/2026): justo
   encima va el cierre verde o granate, y el pie claro cortaba la página en
   una franja blanca. Los colores son los del pie de la web: fondo
   `carbon-950` y texto `tinta-300` (7,8:1 medido sobre ese fondo). */
.arra-lp-pie { padding: 28px var(--lp-lado, 20px) 96px; text-align: center; font-size: 13px; line-height: 1.7;
	color: var(--wp--preset--color--tinta-300); background: var(--wp--preset--color--carbon-950); display: grid; gap: 4px; }
.arra-lp-pie p { margin: 0; }
.arra-lp-pie a { color: var(--wp--preset--color--tinta-300); text-decoration-color: var(--wp--preset--color--dorado-500);
	text-underline-offset: 0.2em; transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
@media (hover: hover) { .arra-lp-pie a:hover { color: var(--wp--preset--color--blanco); } }
@media (min-width: 860px) { .arra-lp-pie { padding-block-end: 28px; } }

/* ---------------------------------------------- barra fija del móvil */
/* Llamar o pedir información, siempre a un pulgar. Se esconde mientras
   el formulario o el cierre están a la vista: ahí sobra. */
.arra-lp-fija { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--wp--preset--color--blanco) 94%, transparent);
	backdrop-filter: blur(10px); border-block-start: 1px solid var(--wp--preset--color--neutro-400);
	transition: transform 320ms var(--wp--custom--movimiento--salida); }
.arra-lp-fija.esta-oculta { transform: translateY(110%); }
.arra-lp-fija a { min-block-size: 48px; padding: 0 10px; letter-spacing: 0.06em; white-space: nowrap; }
.arra-lp-fija .arra-lp-boton--linea { color: var(--fg); border-color: var(--wp--preset--color--dorado-700); }
@media (min-width: 860px) { .arra-lp-fija { display: none; } }

/* El botón redondo de CookieYes, por encima de la barra (30/09/2026): en su
   esquina tapaba medio «Llamar». La barra mide 71 px (48 de botón y 10 + 10
   de relleno, más el filete y la zona segura), y 12 de aire. Cuando la barra
   se esconde, baja a su sitio con ella. El chat de tawk.to se coloca igual
   desde inc/terceros.php, porque se pinta en su propio marco. */
@media (max-width: 859px) {
	body:has(.arra-lp-fija) .cky-btn-revisit-wrapper {
		bottom: calc(83px + env(safe-area-inset-bottom));
		transition: bottom 320ms var(--wp--custom--movimiento--salida);
	}
	body:has(.arra-lp-fija.esta-oculta) .cky-btn-revisit-wrapper { bottom: 15px; }
	/* El del chat, igual y en la otra esquina. */
	body:has(.arra-lp-fija) .arra-chat {
		inset-block-end: calc(83px + env(safe-area-inset-bottom, 0px));
		transition: inset-block-end 320ms var(--wp--custom--movimiento--salida),
			scale 200ms var(--wp--custom--movimiento--salida);
	}
	body:has(.arra-lp-fija.esta-oculta) .arra-chat { inset-block-end: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.arra-lp-heroe__foto img { animation: none; }
	.arra-lp-fija, body:has(.arra-lp-fija) .cky-btn-revisit-wrapper,
	body:has(.arra-lp-fija) .arra-chat { transition: none; }
}

/* ---------------------------------------------------- página de gracias */
.arra-lp-gracias { min-block-size: 60vh; display: grid; place-content: center; justify-items: center;
	gap: 16px; text-align: center; padding: clamp(64px, 10vw, 128px) clamp(20px, 5vw, 56px); }
.arra-lp-gracias h1 { margin: 0; font-family: var(--font-display); font-weight: 500;
	font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.03em; line-height: 1.1; color: var(--fg); }
.arra-lp-gracias p { margin: 0; max-inline-size: 52ch; font-size: 17px; line-height: 1.6; color: var(--fg-soft); }
.arra-lp-gracias a:not(.arra-lp-boton) { color: var(--fg); text-decoration-color: var(--wp--preset--color--dorado-500);
	text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.arra-lp-gracias .arra-lp-boton { margin-block-start: 8px; }



/* ----------------------------------------------- el problema (Corporate) */
.arra-lp-problemas { list-style: none; padding: 0; display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.arra-lp-problemas li { display: grid; gap: 8px; align-content: start; padding: 24px 22px 22px;
	border-block-start: 2px solid var(--arra-linea); background: var(--wp--preset--color--neutro-100);
	border-radius: 0 0 14px 14px; }
.arra-lp-problemas__num { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em;
	/* Ídem: dorado-700 sobre el gris de banda daba 3,27:1. */
	color: var(--arra-linea-honda, var(--wp--preset--color--tinta-900)); }
.arra-lp-problemas strong { font-family: var(--font-display); font-weight: 500; font-size: 18.5px; line-height: 1.3; }
.arra-lp-problemas li > span:last-child { font-size: 15px; line-height: 1.6; color: var(--fg-soft); }

/* ------------------------------------------------------ el caso */
.arra-lp-caso { background: var(--arra-linea-honda); color: var(--wp--preset--color--blanco);
	padding: clamp(56px, 8vw, 104px) var(--lp-lado); }
.arra-lp-caso__dentro { max-inline-size: var(--lp-ancho); margin-inline: auto; }
.arra-lp .arra-lp-encabezado--claro { display: grid; gap: 12px; justify-items: center; text-align: center;
	max-inline-size: 760px; margin: 0 auto clamp(28px, 4vw, 44px); }
.arra-lp .arra-lp-encabezado--claro h2 { color: var(--wp--preset--color--blanco); font-family: var(--font-display);
	font-weight: 500; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -0.025em; }
.arra-lp .arra-lp-encabezado--claro h2 span { color: var(--wp--preset--color--dorado-300); }
.arra-lp .arra-lp-encabezado--claro .arra-kicker { color: var(--wp--preset--color--dorado-300); }
.arra-lp-caso__columnas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.arra-lp-caso__columnas > div { padding: 24px; border-radius: var(--r-lg);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--blanco) 18%, transparent); }
.arra-lp-caso__despues { background: color-mix(in srgb, var(--wp--preset--color--blanco) 7%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--dorado-500) 55%, transparent) !important; }
.arra-lp-caso__rotulo { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--dorado-300); margin-block-end: 14px !important; }
.arra-lp-caso ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.arra-lp-caso__antes li { position: relative; padding-inline-start: 18px; font-size: 15.5px; line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--blanco) 78%, transparent); }
.arra-lp-caso__antes li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em;
	inline-size: 8px; block-size: 1px; background: color-mix(in srgb, var(--wp--preset--color--blanco) 55%, transparent); }
.arra-lp-caso__despues li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px;
	font-size: 15.5px; line-height: 1.55; }
.arra-lp-caso__cifras { margin-block-start: clamp(28px, 4vw, 40px) !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px !important; }
@media (min-width: 860px) { .arra-lp-caso__cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.arra-lp-caso__cifras li { display: grid; gap: 4px; padding-inline-start: 14px;
	border-inline-start: 2px solid var(--wp--preset--color--dorado-500); }
.arra-lp-caso__cifras strong { font-family: var(--font-display); font-weight: 500;
	font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.03em; line-height: 1; color: var(--wp--preset--color--dorado-300); }
.arra-lp-caso__cifras span { font-size: 13.5px; color: color-mix(in srgb, var(--wp--preset--color--blanco) 78%, transparent); }
.arra-lp-caso__cierre { margin-block-start: 28px !important; text-align: center; font-family: var(--font-display);
	font-size: clamp(18px, 2.2vw, 22px); color: var(--wp--preset--color--blanco); }

/* Corporate: cuatro capacidades, dos y dos (en tres columnas quedaba una sola abajo). */
.arra-lp--corporate .arra-lp-incluye { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

/* ------------------------------------------ la cabecera, flotante */
/* Como la barra del resto de la web (cliente, 26/09/2026): pegada arriba en
   reposo y, a partir de 70 px de scroll -la clase `arra-flotante` del body la
   pone nav.js-, se separa de los bordes, se redondea y toma la sombra larga
   de la barra (SOMBRA_AL_FLOTAR en destilar.py). No cambia de alto: solo de
   forma, así que el contenido no salta. */
.arra-lp-cabecera { transition:
	inset var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
	margin var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
	border-radius var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
	box-shadow var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
.arra-flotante .arra-lp-cabecera { inset-block-start: 10px; margin-inline: 12px; border-radius: 20px;
	background: color-mix(in srgb, var(--arra-linea-honda) 96%, transparent);
	box-shadow: 0 1px 1px rgba(6,11,19,0.06), 0 2px 4px rgba(6,11,19,0.06),
		0 6px 12px rgba(6,11,19,0.08), 0 14px 28px rgba(6,11,19,0.12), 0 30px 60px rgba(6,11,19,0.16); }
@media (min-width: 860px) {
	.arra-flotante .arra-lp-cabecera { margin-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.arra-lp-cabecera { transition: none; }
}

/* ==========================================================================
 * LOS EFECTOS DE LA WEB, TAMBIÉN EN LAS LANDING (cliente, 28/09/2026).
 * «Estos mismos errores se repiten en todas las landings: que todas sean
 * iguales» y que se comporten como el resto de la web. Nada de aquí es nuevo:
 * es el gesto que ya hacen las páginas de servicio, traído a las clases de
 * las landing.
 * ========================================================================== */

/* ---- m12 · el destello en la palabra destacada de cada titular.
   Mismo barrido que `.arra-brillo` (motion.css), pero con la luz del color
   que YA tiene la palabra: el de la línea sobre fondo claro y el dorado claro
   sobre el oscuro del héroe y del caso. El color base no cambia, así que el
   contraste medido sigue siendo el mismo; lo único que pasa por encima es un
   reflejo más claro. Donde no se entienda `background-clip: text`, se queda
   el color liso de siempre. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	/* `:not(.arra-palabra)`: en el ordenador motion.js parte el titular en
	   palabras sueltas, y sin esto el barrido se ponía en TODAS. */
	.arra-lp .arra-lp-titulo span:not(.arra-palabra),
	.arra-lp .arra-lp-seccion h2 span:not(.arra-palabra),
	.arra-lp .arra-lp-encabezado--claro h2 span:not(.arra-palabra) {
		--lp-brillo-base: var(--arra-linea);
		--lp-brillo-luz: color-mix(in srgb, var(--arra-linea) 45%, var(--wp--preset--color--blanco));
		background-color: var(--lp-brillo-base);
		background-image: linear-gradient(100deg, transparent 34%, var(--lp-brillo-luz) 50%, transparent 66%);
		background-repeat: no-repeat; background-size: 220% 100%; background-position: 125% 0;
		-webkit-background-clip: text; background-clip: text; color: transparent;
		animation: arra-shine 2.4s linear infinite; }
	.arra-lp .arra-lp-titulo span:not(.arra-palabra),
	.arra-lp .arra-lp-encabezado--claro h2 span:not(.arra-palabra) {
		--lp-brillo-base: var(--wp--preset--color--dorado-300);
		--lp-brillo-luz: color-mix(in srgb, var(--wp--preset--color--dorado-300) 30%, var(--wp--preset--color--blanco)); }
}

/* ---- m14 · los ticks se encienden en cascada al entrar, y el texto llega
   detrás. Los mismos fotogramas que la tesis de la web (paginas.css).
   SOLO EN EL ORDENADOR (cliente, 28/09/2026). En el móvil y la tableta
   cada fila ya entra con el revelado de la web, y sumarle el salto del tick
   y el texto llegando de lado se veía como algo que aparece y luego se
   recoloca. Mismo corte que la entrada de ordenador de motion.css: 860 px. */
@media (min-width: 860px) {
	.js-motion .arra-lp :is(.arra-lp-ticks, .arra-lp-incluye) > li.in .arra-lp-tick {
		animation: arra-tick-pop 400ms var(--wp--custom--movimiento--salida) 140ms backwards; }
	.js-motion .arra-lp :is(.arra-lp-ticks > li.in > span, .arra-lp-incluye > li.in > div) {
		animation: arra-tick-entra 500ms var(--wp--custom--movimiento--salida) 200ms backwards; }
	.js-motion .arra-lp-tarjeta.in li .arra-lp-tick {
		animation: arra-tick-pop 400ms var(--wp--custom--movimiento--salida) backwards; }
	.js-motion .arra-lp-tarjeta.in li > span {
		animation: arra-tick-entra 500ms var(--wp--custom--movimiento--salida) backwards; }
	.arra-lp-tarjeta.in li:nth-child(1) :is(.arra-lp-tick, span) { animation-delay: 220ms; }
	.arra-lp-tarjeta.in li:nth-child(2) :is(.arra-lp-tick, span) { animation-delay: 340ms; }
	.arra-lp-tarjeta.in li:nth-child(3) :is(.arra-lp-tick, span) { animation-delay: 460ms; }
	.arra-lp-tarjeta.in li:nth-child(4) :is(.arra-lp-tick, span) { animation-delay: 580ms; }
	.arra-lp-tarjeta.in li:nth-child(5) :is(.arra-lp-tick, span) { animation-delay: 700ms; }
	.arra-lp-tarjeta.in li:nth-child(6) :is(.arra-lp-tick, span) { animation-delay: 820ms; }
}

/* ---- EL HÉROE, EN EL MÓVIL Y LA TABLETA, SOLO SE FUNDE (cliente, 28/09/2026:
   «las frases de los ticks del héroe aparecen y se desplazan hacia arriba»).
   La entrada de la web por debajo de 860 px sube cada elemento 28 px
   mientras aparece (motion.css, `arra-entra-subiendo`); a media página se
   confunde con el propio scroll, pero en el héroe, quieto y lo primero que
   se ve, se lee como algo que aparece y luego se recoloca. Aquí se queda el
   mismo fotograma con el recorrido a cero: solo el fundido, con su cascada.
   En el ordenador no cambia nada: allí va la entrada por palabras. */
@media (max-width: 859px), (hover: none), (pointer: coarse) {
	.js-motion .arra-lp-heroe .arra-reveal:not(.in) { transform: none; }
	.js-motion .arra-lp-heroe .arra-reveal.in { --arra-entra-sube: 0px; }
}

/* ---- lo que se señala al pasar el ratón, opción a opción: el tick toma el
   color de la línea -verde en Core, granate en Corporate-, como en las
   páginas de servicio (`--arra-senala`), y el texto se adelanta un paso. */
.arra-lp-tick { transition: background-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
	stroke var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
.arra-lp :is(.arra-lp-ticks, .arra-lp-tarjeta, .arra-lp-caso__despues) li > span,
.arra-lp-incluye li > div { transition: transform var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
	color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
@media (hover: hover) and (pointer: fine) {
	.arra-lp :is(.arra-lp-tarjeta, .arra-lp-incluye) li:hover .arra-lp-tick {
		background-color: var(--arra-senala, var(--arra-linea)); stroke: var(--wp--preset--color--blanco); }
	.arra-lp :is(.arra-lp-tarjeta, .arra-lp-ticks, .arra-lp-caso__despues) li:hover > span,
	.arra-lp-incluye li:hover > div { transform: translateX(3px); }
	.arra-lp-tarjeta li:hover > span { color: var(--arra-linea-fuerte); }
	/* Sobre fondo oscuro -héroe y caso- el verde o el granate no se verían:
	   ahí el tick se aclara. */
	.arra-lp :is(.arra-lp-ticks, .arra-lp-caso__despues) li:hover .arra-lp-tick {
		background-color: var(--wp--preset--color--dorado-300); }
}

/* ---- las tarjetas con tick de «Qué recibes» / «Qué incluye» se iluminan:
   suben, el borde se dora y el título toma el color de la línea, igual que
   las fichas de las páginas de servicio. */
.arra-lp-incluye li { transition: transform var(--dur-base) var(--ease-out),
	border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.arra-lp-incluye strong { transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
@media (hover: hover) and (pointer: fine) {
	.arra-lp-incluye li:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--dorado-700);
		box-shadow: 0 18px 36px -26px rgba(6, 11, 19, 0.35); }
	.arra-lp-incluye li:hover strong { color: var(--arra-linea); }
}

/* ---- las fichas del problema (Corporate) y las columnas del caso, igual. */
.arra-lp-problemas li { transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.arra-lp-problemas strong { transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
@media (hover: hover) and (pointer: fine) {
	.arra-lp-problemas li:hover { transform: translateY(-3px); background: var(--wp--preset--color--blanco);
		box-shadow: 0 18px 36px -26px rgba(6, 11, 19, 0.35); }
	.arra-lp-problemas li:hover strong { color: var(--arra-linea); }
}

/* ---- la franja de pruebas (plazo, precio, años, online): al pasar, cada
   cifra se vuelve una placa del color de la línea con la cifra en dorado.
   El relleno está puesto también en reposo para que no se mueva nada. */
.arra-lp-pruebas li { padding: 10px 14px; border-radius: 0 12px 12px 0;
	transition: background-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
		border-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
.arra-lp-pruebas :is(strong, span) { transition: color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
@media (hover: hover) and (pointer: fine) {
	.arra-lp-pruebas li:hover { background: var(--arra-linea-honda); border-inline-start-color: var(--wp--preset--color--dorado-300); }
	.arra-lp-pruebas li:hover strong { color: var(--wp--preset--color--dorado-300); }
	.arra-lp-pruebas li:hover span { color: color-mix(in srgb, var(--wp--preset--color--blanco) 86%, transparent); }
}

/* ---- las tarjetas de packs y precio: columna flexible, no rejilla.
   Con `grid-template-rows: auto auto auto 1fr auto`, en una tarjeta SIN
   precio el botón caía en la fila `1fr` y se estiraba hasta llenar la
   tarjeta: por eso «Solicitar propuesta» y «Reservar mi consultoría» salían
   altísimos en el móvil y distintos de «Quiero constituir mi SL», que sí
   tiene precio. Ahora lo que crece es la LISTA y el botón queda abajo, con
   su alto, alineado entre tarjetas. */
.arra-lp-tarjeta { display: flex; flex-direction: column; gap: 12px; }
.arra-lp-tarjeta ul { flex: 1 0 auto; }
.arra-lp-tarjeta .arra-cta-solido { align-self: stretch; text-align: center; padding-inline: 14px; }

@media (prefers-reduced-motion: reduce) {
	.arra-lp :is(.arra-lp-titulo, .arra-lp-seccion h2, .arra-lp-encabezado--claro h2) span:not(.arra-palabra) { animation: none; }
	.arra-lp .arra-lp-tick, .arra-lp li > span, .arra-lp-incluye li > div { animation: none !important; }
}

/* El campo trampa del antispam (inc/formularios.php): fuera de la vista y del
   tabulador, pero no `display: none`, que algunos robots saben saltarse. */
.arra-trampa { position: absolute !important; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }