/*
  Secciones del home de Neural. Una sección por bloque de reglas, en el mismo
  orden en que aparecen en el diseño (ver docs/analisis-stitch.md).
*/

/* =============================================================== S1 Header */

.neural-header {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(24px);
	border-bottom: 1px solid var(--wp--preset--color--borde);
	position: sticky;
	top: 0;
	z-index: 50;
}

.neural-header__interior {
	max-width: 1280px;
	margin-inline: auto;
	min-height: 80px;
	padding: 0 1.25rem;
	display: flex;
	align-items: center;
	gap: 2rem;
}

.neural-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
	flex-shrink: 0;
}

/* Isotipo: anillos concéntricos (el exterior lleno, los internos punteados) con un
   triángulo al centro. Va como SVG porque el punteado radial no sale con CSS. */
.neural-logo__marca {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	display: block;
}

/*
  El wordmark va RELLENO CON EL DEGRADADO, no en tinta: arranca cian en la N y
  termina violeta en la L. Verificado con zoom sobre el Stitch (2026-08-09).
  El tracking muy amplio es lo que le da el aire de la marca.
*/
.neural-logo__texto {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	background: var(--grad-marca);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.neural-nav { margin-inline: auto; }

.neural-nav__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.75rem;
}

.neural-nav__lista a {
	color: var(--wp--preset--color--texto-fuerte);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

.neural-nav__lista a:hover { color: var(--wp--preset--color--violeta); }

/* Chevron de los ítems con megamenú. */
.neural-nav__lista .tiene-menu > a::after {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-left: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.neural-header__acciones {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.neural-idioma {
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--texto-fuerte);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.neural-idioma::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

@media (max-width: 980px) {
	.neural-nav { display: none; }
}

/* ================================================================= S2 Hero */

.hero {
	max-width: 1280px;
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 5.5rem) 1.25rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* Nota: los slugs de theme.json no llevan dígitos a propósito. WordPress convierte
   "h1" en "h-1" al generar la variable, y la referencia queda rota en silencio. */
.hero__titulo {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--texto-fuerte);
	margin: 0 0 1.25rem;
}

/* Cada línea del H1 va en su propia fila: el diseño las quiebra siempre igual. */
.hero__titulo span { display: block; }

.hero__bajada {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--texto);
	max-width: 34rem;
	margin: 0 0 2rem;
}

/* Las negritas del párrafo son semánticas: marcan los beneficios, no decoran. */
.hero__bajada strong { color: var(--wp--preset--color--texto-fuerte); font-weight: 700; }

.hero__acciones { display: flex; gap: 0.875rem; flex-wrap: wrap; }

.hero__media { border-radius: var(--radio-media); overflow: hidden; }
.hero__media img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; }
	.hero__media { order: -1; }
}

/* ========================================================= S3 Franja logos */

.franja-logos {
	background: var(--wp--preset--color--fondo-suave);
	padding-block: 2.5rem;
}

.franja-logos__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* ================================================== S4 Recupera el control */

.control {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto-tenue);
	padding-block: var(--seccion-y);
	/* En el diseño el fondo es una foto de retail desenfocada. Hasta tener el asset,
	   un degradado radial sostiene la profundidad sin verse "plano". */
	background-image:
		radial-gradient(60% 80% at 15% 40%, rgba(168, 85, 247, 0.18), transparent 70%),
		radial-gradient(50% 70% at 85% 30%, rgba(34, 211, 238, 0.12), transparent 70%);
}

.control__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* Marco del teléfono: negro, muy redondeado, con la pantalla recortada adentro. */
.telefono {
	width: min(300px, 80%);
	margin-inline: auto;
	background: #000;
	border-radius: 42px;
	padding: 12px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.telefono img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 32px;
}

.control__texto h2 { color: #fff; margin: 0 0 1rem; }
.control__texto p { margin: 0 0 1.25rem; }

.control__remate { color: #fff; font-weight: 700; }

.control__cta { margin-top: 2rem; }

@media (max-width: 900px) {
	.control__interior { grid-template-columns: 1fr; }
}

/* ============================================ S5 Sin hardware + verticales */

.verticales__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.verticales__encabezado { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }

.verticales__encabezado h2 { margin: 0 0 1rem; }
.verticales__encabezado h2 span { display: block; }

.verticales__sub {
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 1.25rem;
}

.verticales__destacado {
	color: var(--wp--preset--color--texto-fuerte);
	font-weight: 700;
	margin: 0;
}

/* Las tarjetas de vertical tienen borde suave: sobre fondo blanco, sin él se pierden. */
.verticales .tarjeta {
	border: 1px solid var(--wp--preset--color--borde);
	text-align: center;
}

.verticales .tarjeta h3 { margin: 0; font-size: var(--wp--preset--font-size--lg); }
.verticales .tarjeta p { margin: 0; font-size: var(--wp--preset--font-size--sm); }

/* El botón se ancla abajo para que las tres tarjetas alineen aunque el copy difiera. */
.tarjeta__pie { margin-top: auto !important; padding-top: 0.5rem; }

/* ==================================================== S6 Impacto demostrado */

.metricas__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.metricas__titulo { text-align: center; margin: 0 0 3rem; }
.metricas__titulo span { display: block; }
.metricas__titulo .grad { display: inline; }

.metrica { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }

.metrica__check {
	width: 1.5rem;
	height: 1.5rem;
	background: var(--wp--preset--color--cian);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.metrica__cifra, .metrica__etiqueta, .metrica__nota { margin: 0; }

.metrica__nota {
	font-size: var(--wp--preset--font-size--xs);
	color: #6b7280;
	line-height: 1.4;
}

/* ====================================================== S7 Casos de éxito */

.casos__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* Las tarjetas de dato "flotan" en posiciones desalineadas a propósito. */
.casos__datos { position: relative; min-height: 320px; }

.dato {
	position: absolute;
	background: #fff;
	color: var(--wp--preset--color--texto-fuerte);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	max-width: 15rem;
}

.dato__cifra { margin: 0; font-size: var(--wp--preset--font-size--xl); font-weight: 800; line-height: 1; }
.dato__cifra span { font-size: var(--wp--preset--font-size--sm); font-weight: 600; }
.dato__texto { margin: 0.35rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--texto); line-height: 1.35; }

.dato--alto  { top: 0; left: 0; }
.dato--bajo  { bottom: 0; left: 8%; }

/* El punto de acento cian de la tarjeta inferior. */
.dato__punto {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--cian);
}

.dato--circulo {
	top: 38%;
	left: 55%;
	width: 9rem;
	height: 9rem;
	max-width: none;
	border-radius: 50%;
	display: grid;
	place-content: center;
	text-align: center;
	padding: 0;
}

.casos__texto h2 { margin: 0.75rem 0 1rem; }
.casos__texto .eyebrow { color: var(--wp--preset--color--texto-tenue); margin: 0; }
.casos__texto p { margin: 0 0 1.5rem; }

@media (max-width: 900px) {
	.casos__interior { grid-template-columns: 1fr; }
	.casos__datos { min-height: 260px; }
	.dato--circulo { left: auto; right: 0; }
}

/* ============================================================== S8 Prensa */

.prensa__interior { max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; }
.prensa__titulo { text-align: center; margin: 0 0 3rem; }

.nota { display: flex; flex-direction: column; gap: 0.75rem; }

.nota__media { position: relative; border-radius: var(--radio-media); overflow: hidden; }
.nota__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* Chip blanco con el nombre del medio, montado sobre el borde inferior de la imagen. */
.nota__chip {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	background: #fff;
	border-radius: var(--pildora);
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.nota__meta {
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-tenue);
}

.nota__titulo { margin: 0; font-size: var(--wp--preset--font-size--lg); line-height: 1.25; }

/* ========================================================= S9 Testimonios */

.testimonios__interior { max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; }

.testimonios__encabezado { text-align: center; max-width: 46rem; margin: 0 auto 3.5rem; }
.testimonios__encabezado h2 { margin: 0 0 1rem; }
.testimonios__encabezado p { margin: 0 0 0.5rem; }

/*
  Acá el sistema se abre: el degradado se usa como sus dos colores sólidos.
  Nunca introducir un color fuera de ese eje.
*/
.tono-cian    { color: var(--wp--preset--color--cian); }
.tono-violeta { color: var(--wp--preset--color--violeta); }

.testimonios__enlace a { color: var(--wp--preset--color--cian); font-weight: 700; text-decoration: none; }
.testimonios__enlace a:hover { text-decoration: underline; }

.testimonio-bloque { margin: 0; display: flex; flex-direction: column; }

.testimonio p { margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--texto); }

/* Variantes de tono del borde: la primera tarjeta es cian, las otras violeta. */
.testimonio--cian::before    { background: linear-gradient(180deg, #00f0ff, #00f0ff); }
.testimonio--violeta::before { background: linear-gradient(180deg, #8a2be2, #8a2be2); }

/*
  Cola del bocadillo: un cuadrado rotado 45° con solo dos bordes visibles,
  para que herede el color del borde de la tarjeta sin tapar su fondo.
*/
.testimonio-bloque .testimonio { position: relative; }

.testimonio-bloque .testimonio::after {
	content: "";
	position: absolute;
	bottom: -8px;
	right: 2.5rem;
	width: 16px;
	height: 16px;
	background: #fff;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}

.testimonio--cian    { color: #00f0ff; }
.testimonio--violeta { color: #8a2be2; }

.testimonio__autor {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.testimonio__avatar { border-radius: 50%; width: 44px; height: 44px; object-fit: cover; }

.testimonio__autor strong { display: block; color: var(--wp--preset--color--texto-fuerte); }
.testimonio__autor em {
	display: block;
	font-style: normal;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-tenue);
}

.testimonios__puntos { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2.5rem; }

.testimonios__puntos button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--borde);
	cursor: pointer;
}

.testimonios__puntos button.activo { background: var(--wp--preset--color--violeta); }

/* ==================================================== S10 Presencia global */

.global__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.global__texto h2 { margin: 0 0 1rem; }
.global__texto p { margin: 0 0 1.25rem; }
.global__destacado { color: var(--wp--preset--color--cian); font-weight: 700; }
.global__mapa img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
	.global__interior { grid-template-columns: 1fr; }
}

/* ==================================================== S11 Contacto (campos) */
/* El layout y los colores de la sección de contacto viven en su bloque propio
   más abajo ("Página de contacto (wizard)"). Acá solo quedan los estilos de
   campo de formulario, que también usan otras secciones. */

/* minmax(0,1fr) — sin el 0, cada columna respeta el ancho intrínseco del input
   y las dos se empujan hasta desbordar. */
.formulario__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }

.campo { margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.campo label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--texto-fuerte);
}

/* Enumerar tipos dejaba fuera number, date, etc. (el paso 3 del wizard se veía
   cuadrado). Se estiliza todo input MENOS checkbox y radio, que llevan su propio
   tratamiento. Así cualquier tipo nuevo hereda el estilo sin tocar esto. */
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 8px;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	background: #fff;
	color: var(--wp--preset--color--texto-fuerte);
}

.campo :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--violeta);
	outline-offset: 1px;
	border-color: transparent;
}

.campo textarea { resize: vertical; }

/* Select: quitar la apariencia nativa (borde y flecha del sistema, que rompen la
   uniformidad con los text inputs) y dibujar una flecha propia. */
.campo select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.1rem;
	padding-right: 2.5rem;
}

/* number: ocultar los spinners para que quede igual de limpio que un text input. */
.campo input[type="number"] { -moz-appearance: textfield; }
.campo input[type="number"]::-webkit-outer-spin-button,
.campo input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Radios: control propio para que combinen con el resto del formulario en vez del
   look nativo tosco. */
.radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	border: 1.5px solid var(--wp--preset--color--borde);
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
}
.radio input[type="radio"]::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--grad-marca);
	transform: scale(0);
	transition: transform 0.12s ease;
}
.radio input[type="radio"]:checked { border-color: var(--wp--preset--color--violeta); }
.radio input[type="radio"]:checked::before { transform: scale(1); }
.radio input[type="radio"]:focus-visible { outline: 2px solid var(--wp--preset--color--violeta); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.radio input[type="radio"]::before { transition: none; }
}

/* El consentimiento es checkbox + etiqueta en línea, no una columna. */
.campo--consentimiento {
	flex-direction: row;
	align-items: start;
	gap: 0.625rem;
	margin-block: 1.25rem;
}

.campo--consentimiento input { margin-top: 0.2rem; flex-shrink: 0; }

.campo--consentimiento label {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto);
	line-height: 1.5;
}

.campo--consentimiento a { color: var(--wp--preset--color--violeta); }

@media (max-width: 900px) {
	.contacto__interior { grid-template-columns: 1fr; }
	.formulario__fila { grid-template-columns: 1fr; }
}

/* ============================================================== S12 Footer */

.pie { background: #fff; padding-top: 4rem; }

.pie__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 2rem;
}

.pie__ciudad { margin: 1.25rem 0 0; font-size: var(--wp--preset--font-size--sm); }
.pie__ciudad strong { color: var(--wp--preset--color--texto-fuerte); }

.pie__columna h2 {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 1rem;
	color: var(--wp--preset--color--texto-fuerte);
}

.pie__columna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.pie__columna a {
	color: var(--wp--preset--color--texto);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
}

.pie__columna a:hover { color: var(--wp--preset--color--violeta); }

.pie__barra { margin-top: 3rem; padding-block: 1.5rem; }

.pie__barra-interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-tenue);
}

.pie__legal { display: flex; gap: 1.5rem; margin: 0; }
.pie__legal a { color: inherit; text-decoration: none; }
.pie__copy { margin: 0; }

.pie__redes { display: flex; gap: 0.75rem; margin: 0; }
.pie__redes a {
	width: 24px;
	height: 24px;
	display: grid;
	place-content: center;
	color: var(--wp--preset--color--texto);
	text-decoration: none;
	font-weight: 700;
}

@media (max-width: 900px) {
	.pie__interior { grid-template-columns: 1fr 1fr; }
}

/* ============================================ Submenús del nav (ruteo real) */

.neural-nav__lista > li { position: relative; }

.neural-submenu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: 100%;
	left: -0.75rem;
	min-width: 14rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	/* Oculto por defecto pero enfocable: se muestra con hover y con foco de teclado. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.neural-nav__lista > li:hover > .neural-submenu,
.neural-nav__lista > li:focus-within > .neural-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.neural-submenu li { display: block; }

.neural-submenu a {
	display: block;
	padding: 0.5rem 1rem;
	white-space: nowrap;
}

.neural-submenu a:hover { background: var(--wp--preset--color--fondo-suave); }

/* Página interior: encabezado sobrio hasta que se diseñen las internas. */
.pagina { padding-block: clamp(3rem, 6vw, 5rem); }
.pagina__encabezado { margin-bottom: 2rem; }

@media (prefers-reduced-motion: reduce) {
	.neural-submenu { transition: none; }
}

/* ================================================ Plantilla de producto */

/* El eyebrow nombra el sector arriba del titular, para orientar sin repetir. */
.producto-hero__eyebrow {
	color: var(--wp--preset--color--violeta);
	margin: 0 0 0.75rem;
}

/* En el home el mockup va a la izquierda; en producto va a la derecha,
   para que el texto quede del mismo lado que en el hero de arriba. */
.producto-beneficios .control__interior { grid-template-columns: 1.1fr 0.9fr; }

@media (max-width: 900px) {
	.producto-beneficios .control__interior { grid-template-columns: 1fr; }
}

/* ============================================ Plantilla de producto (Stitch) */

.migas { border-bottom: 1px solid var(--wp--preset--color--borde); }
.migas__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0.875rem 1.25rem;
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-tenue);
}
.migas a { color: var(--wp--preset--color--texto); text-decoration: none; }
.migas a:hover { color: var(--wp--preset--color--violeta); }

.prod-hero__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 5rem) 1.25rem;
	max-width: 900px;
}
.prod-hero__eyebrow { color: var(--wp--preset--color--violeta); margin: 0 0 1rem; }
.prod-hero__titulo {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 1.25rem;
}
.prod-hero__titulo span { display: block; }
.prod-hero__desc { font-size: var(--wp--preset--font-size--base); margin: 0 0 2rem; max-width: 44rem; }

.prod-intro__interior,
.prod-beneficios__interior,
.prod-cifras__interior,
.prod-protege__interior,
.prod-como__interior,
.prod-privacidad__interior,
.prod-faq__interior,
.prod-blog__interior,
.prod-banner__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.prod-intro__titulo span { display: block; }
.prod-intro__titulo { margin: 0 0 1.5rem; }
.prod-intro__texto { max-width: 62ch; display: grid; gap: 1rem; }

.prod-beneficios h2 { margin: 0 0 2rem; max-width: 32ch; }
.prod-beneficios__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.prod-beneficios__texto { display: grid; gap: 1rem; }
.prod-beneficios__lista { align-content: start; font-weight: 600; color: var(--wp--preset--color--texto-fuerte); }

.prod-cifras h2 { margin: 0 0 2rem; }
.prod-cifras__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.prod-cifra {
	background: var(--wp--preset--color--contenedor-bajo);
	border-radius: var(--radio-tarjeta);
	padding: 1.75rem;
}
.prod-cifra p { margin: 0; color: #fff; font-weight: 600; }
.prod-cifra__marca {
	display: block;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--grad-marca);
	margin-bottom: 1rem;
}

.prod-protege__titulo span { display: block; }
.prod-protege__titulo { margin: 0 0 2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.prod-protege__bloque h3 { margin: 0 0 0.75rem; }
.prod-protege__bloque p { margin: 0; }

.prod-como h2 { margin: 0 0 1.5rem; max-width: 26ch; }
.prod-como__texto { display: grid; gap: 1rem; max-width: 68ch; margin-bottom: 3rem; }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.paso__num {
	display: grid;
	place-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--grad-marca);
	color: #fff;
	font-weight: 800;
	margin-bottom: 1rem;
}
.paso__titulo { font-size: var(--wp--preset--font-size--lg); margin: 0 0 0.75rem; }
.paso__texto { margin: 0; font-size: var(--wp--preset--font-size--sm); }
.prod-como__cta { margin-top: 3rem; }

.prod-privacidad__interior { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.prod-privacidad__texto h2 { margin: 0 0 1.25rem; }
.prod-privacidad__texto p { margin: 0 0 1rem; }
.prod-privacidad__texto .check-lista { margin-top: 1.5rem; }

.prod-banner { background: var(--wp--preset--color--superficie); padding-block: clamp(3rem, 6vw, 4.5rem); text-align: center; }
.prod-banner h2 { color: #fff; margin: 0 0 0.75rem; }
.prod-banner p { color: var(--wp--preset--color--texto-tenue); margin: 0 0 1.5rem; }

.prod-faq h2, .prod-blog h2 { text-align: center; margin: 0 0 2.5rem; }
.faq { max-width: 800px; margin-inline: auto; display: grid; gap: 0.75rem; }
.faq__item { border: 1px solid var(--wp--preset--color--borde); border-radius: 12px; background: #fff; }
.faq__pregunta {
	cursor: pointer;
	padding: 1rem 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--texto-fuerte);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after { content: "+"; font-weight: 400; font-size: 1.25rem; line-height: 1; }
.faq__item[open] .faq__pregunta::after { content: "\2212"; }
.faq__respuesta { padding: 0 1.25rem 1.25rem; font-size: var(--wp--preset--font-size--sm); }

.articulo__fecha { margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--texto-tenue); }
.articulo__titulo { margin: 0; font-size: var(--wp--preset--font-size--lg); line-height: 1.3; }
.prod-blog__cta { text-align: center; margin-top: 2.5rem; }

@media (max-width: 900px) {
	.prod-beneficios__cols,
	.grid-2,
	.pasos,
	.prod-privacidad__interior { grid-template-columns: 1fr; }
}

/* --------------------------------------- assets reales del export */

/* Logo: el Stitch usa una imagen, no texto. */
.neural-logo__img { height: 32px; width: auto; display: block; }
.pie .neural-logo__img { height: 28px; }

/* El hero y el mockup son VIDEO en el diseño original, no imagen fija. */
.hero__media video,
.telefono video {
	display: block;
	width: 100%;
	height: auto;
}
.telefono video { border-radius: 32px; }

.prod-hero__interior { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 1280px; }
.prod-hero__media img { display: block; width: 100%; height: auto; border-radius: var(--radio-media); }

@media (max-width: 900px) {
	.prod-hero__interior { grid-template-columns: 1fr; }
}

.prod-intro__cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.prod-intro__texto { display: grid; gap: 1rem; max-width: none; }
.prod-intro__media img,
.prod-protege__media img { display: block; width: 100%; height: auto; border-radius: var(--radio-media); }
.prod-protege__bloques { display: grid; gap: 2rem; align-content: start; }

@media (max-width: 900px) {
	.prod-intro__cols { grid-template-columns: 1fr; }
}


/* =========================================== Página de contacto (wizard) */

/* Fondo #f9fafb (azul muy claro, casi blanco) como el body del Stitch, NO gris ni
   oscuro. El original suma un halo de gradiente muy tenue: eso es lo que le da el
   tinte azulado en vez de gris plano. */
.contacto {
	background:
		radial-gradient(60% 50% at 75% 30%, rgba(0, 240, 255, 0.06), transparent 70%),
		radial-gradient(50% 50% at 15% 80%, rgba(138, 43, 226, 0.05), transparent 70%),
		#f9fafb;
	color: var(--wp--preset--color--texto);
	padding-block: var(--seccion-y);
}

/* Halo detrás de la tarjeta del formulario, como en el diseño (blur, opacidad baja). */
.contacto__tarjeta { position: relative; }
.contacto__tarjeta::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: calc(var(--radio-tarjeta) + 4px);
	background: var(--grad-marca);
	filter: blur(24px);
	opacity: 0.1;
	z-index: -1;
}
.contacto__interior {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.contacto__pitch { padding-top: 1rem; }
.contacto__titulo {
	color: var(--wp--preset--color--texto-fuerte);
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.05;
	margin: 0 0 1.5rem;
}
.contacto__lead { margin: 0 0 1.25rem; }
.contacto__remate { color: var(--wp--preset--color--texto-fuerte); font-weight: 700; margin: 0 0 1.5rem; }
.contacto__lista { color: var(--wp--preset--color--texto); }
.contacto__cierre { color: var(--wp--preset--color--texto-tenue); margin-top: 1.5rem; font-size: var(--wp--preset--font-size--sm); }

.contacto__tarjeta {
	background: #fff;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--radio-tarjeta);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--wp--preset--color--texto);
}

/* Título del formulario EN GRADIENTE (usa .grad del sistema). */
.contacto__form-titulo {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
}

/* Barra de progreso: pista gris + relleno que crece 33 → 66 → 100 %.
   El contenedor no cambia de alto: cada paso reemplaza al anterior. */
.wizard__barra {
	width: 100%;
	height: 8px;
	background: var(--wp--preset--color--borde);
	border-radius: var(--pildora);
	overflow: hidden;
	margin-bottom: 1.75rem;
}
.wizard__relleno {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--texto-fuerte);
	border-radius: var(--pildora);
	transition: width 0.3s ease;
}

.wizard__paso { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.wizard__nav { display: flex; gap: 0.75rem; margin-top: 1.5rem; }

.campo--radios { border: 0; padding: 0; margin: 0 0 1rem; }
.campo--radios legend { font-size: var(--wp--preset--font-size--xs); font-weight: 600; color: var(--wp--preset--color--texto-fuerte); padding: 0; margin-bottom: 0.5rem; }
.campo__nota { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--texto-tenue); margin: 0 0 0.75rem; }
.radio { display: flex; align-items: center; gap: 0.5rem; font-size: var(--wp--preset--font-size--sm); padding: 0.35rem 0; cursor: pointer; }

/* Estado de éxito: check en círculo verde. */
.wizard__exito { text-align: center; padding: 2rem 0; }
.wizard__exito h3 { margin: 0 0 0.75rem; }
.wizard__exito p { margin: 0; color: var(--wp--preset--color--texto); }
.wizard__check {
	display: inline-grid;
	place-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: #dcfce7;
	margin-bottom: 1.25rem;
}
.wizard__check::before {
	content: "";
	width: 1.75rem;
	height: 1.75rem;
	background: #16a34a;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.wizard__relleno { transition: none; }
}
@media (max-width: 900px) {
	.contacto__interior { grid-template-columns: 1fr; }
}

/* ------------------------------ Form corto (home / productos) */
/* El del final del home va sobre VIDEO con velo oscuro y texto blanco.
   (La pagina /contacto/ dedicada es distinta: fondo claro.) */
.contacto--corto {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--superficie);
	color: #fff;
}
.contacto__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.contacto__velo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1;
}
.contacto--corto .contacto__interior { position: relative; z-index: 2; }
.contacto__interior--corto { grid-template-columns: 1fr 1.1fr; align-items: center; }
.contacto--corto .contacto__pitch { padding-top: 0; }
.contacto--corto .contacto__titulo { font-size: var(--wp--preset--font-size--titulo); color: #fff; }
.contacto--corto .contacto__lead { color: #e5e7eb; }
.form-corto .campo--consentimiento { margin-block: 1.25rem; }

@media (max-width: 900px) {
	.contacto__interior--corto { grid-template-columns: 1fr; }
}

/* ------------------------------ Sectores (índice) + páginas legales */

.sectores { padding-block: clamp(3rem, 6vw, 5rem); }
.sectores__interior { max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; }
.sectores__eyebrow { color: var(--wp--preset--color--violeta); margin: 0 0 1rem; }
.sectores__titulo { font-size: var(--wp--preset--font-size--display); line-height: 1.08; max-width: 20ch; margin: 0 0 1rem; }
.sectores__lead { color: var(--wp--preset--color--texto); margin: 0; }
.sectores__sub { text-align: center; margin: 0 0 2.5rem; }

.sector-card { text-decoration: none; color: inherit; border: 1px solid var(--wp--preset--color--borde); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.sector-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.sector-card h3 { margin: 0; }
.sector-card p { margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--texto); }
.sector-card__mas { color: var(--wp--preset--color--violeta); font-weight: 700; font-size: var(--wp--preset--font-size--sm); margin-top: auto; }

/* Prose de las páginas legales: ritmo de lectura cómodo. */
.legal h1 { font-size: var(--wp--preset--font-size--display); margin: 0 0 2rem; }
.legal h2 { font-size: var(--wp--preset--font-size--xl); margin: 2.5rem 0 0.75rem; }
.legal h3 { font-size: var(--wp--preset--font-size--lg); margin: 1.75rem 0 0.5rem; }
.legal p, .legal li { color: var(--wp--preset--color--texto); line-height: 1.7; }
.legal ul { padding-left: 1.25rem; }
.legal a { color: var(--wp--preset--color--violeta); }

@media (prefers-reduced-motion: reduce) { .sector-card { transition: none; } .sector-card:hover { transform: none; } }

/* Página de testimonios: tarjetas de caso */
.caso { border: 1px solid var(--wp--preset--color--borde); }
.caso h3 { margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--lg); }
.caso p { margin: 0; color: var(--wp--preset--color--texto); font-size: var(--wp--preset--font-size--sm); }