/*
  Sistema de diseño de Neural — traducido del Stitch.

  Regla central del sistema (ver docs/analisis-stitch.md):
  el degradado SIEMPRE va cian -> violeta, de izquierda a derecha. Cuando hace falta
  color sólido se usa uno de los dos extremos, nunca un color fuera de ese eje.

  Los tokens vienen de theme.json como variables --wp--preset--*. Acá solo se definen
  los componentes que el diseño repite.
*/

/* ---------------------------------------------------------------- primitivas */

/* Sin esto, un input con width:100% + padding desborda su columna de grid y las
   dos columnas del formulario se solapan a lo ancho. Es la base de todo layout. */
*, *::before, *::after { box-sizing: border-box; }

:root {
	--radio-btn: 8px;
	--grad-marca: linear-gradient(90deg, #00f0ff 0%, #8a2be2 100%);
	--radio-tarjeta: 16px;
	--radio-media: 12px;
	--pildora: 9999px;
	--seccion-y: clamp(3.5rem, 6vw, 6rem);
}

/* Texto con relleno degradado. Es la firma visual del sitio: todos los titulares
   mezclan tinta + una o dos palabras acá adentro. Nunca escribirlo a mano por sección. */
.grad {
	background: var(--grad-marca);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* El degradado se recorta al texto; sin esto Safari muestra el fondo completo. */
	-webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------ botones */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: var(--radio-btn);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--wp--preset--color--violeta); outline-offset: 3px; }

/* Primario: la píldora con degradado. Aparece en nav, hero, secciones y submit. */
.btn--grad {
	background: var(--grad-marca);
	color: #fff;
}

/* Secundario: negro sólido. Convive con el primario en el hero. */
.btn--tinta {
	background: var(--wp--preset--color--texto-fuerte);
	color: #fff;
}

/* Terciario: blanco sólido sobre fondo oscuro (ej. "Únete a nosotros ›"). */
.btn--claro {
	background: #fff;
	color: var(--wp--preset--color--texto-fuerte);
}

/* Ancho completo: el "Saber más" de las verticales y el "Enviar" del formulario. */
.btn--bloque { width: 100%; }

/* -------------------------------------------------------------- secciones */

/* WordPress mete un margin (--wp--style--block-gap: 24px) entre cada sección
   hermana del <main>. Ese margen NO tiene fondo: muestra el blanco del body
   detrás, lo que se ve como una franja blanca entre secciones oscuras. Las
   secciones controlan su propio espaciado con padding, así que se elimina el
   gap entre los hijos directos del main. No afecta el interior de las secciones
   ni el contenido de las páginas legales. */
main.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

.seccion { padding-block: var(--seccion-y); }

/* Dos secciones CLARAS consecutivas: la segunda pierde su padding-top. Sin esto,
   el padding-bottom de una + el padding-top de la otra se SUMAN y dejan una franja
   blanca enorme (era 240px entre verticales→métricas y prensa→testimonios). El
   cambio de color ya separa las secciones claras de las oscuras, así que el colapso
   solo aplica cuando ambas son claras. */
.seccion:not(.seccion--oscura):not(.seccion--puntos) + .seccion:not(.seccion--oscura):not(.seccion--puntos) {
	padding-top: 0;
}

.seccion--suave  { background: var(--wp--preset--color--fondo-suave); }

/* Secciones oscuras: --oscura (fondo plano) y --puntos (fondo con grilla) comparten
   el MISMO tratamiento de texto. Antes --puntos solo pintaba el fondo y dejaba el
   texto heredando el color oscuro del body → texto casi negro sobre fondo casi negro
   (contraste 1.13) en casos de éxito y presencia global. */
.seccion--oscura,
.seccion--puntos { color: var(--wp--preset--color--texto-tenue); }
.seccion--oscura :is(h1, h2, h3),
.seccion--puntos :is(h1, h2, h3) { color: #fff; }
/* ...salvo el texto dentro de tarjetas de fondo claro, que debe seguir oscuro. */
.seccion--oscura :is(.tarjeta, .dato, .testimonio, .metrica) :is(h1, h2, h3, p, span),
.seccion--puntos :is(.tarjeta, .dato, .testimonio, .metrica) :is(h1, h2, h3, p, span) {
	color: inherit;
}

/* Textura de grilla de puntos de las secciones oscuras (casos de éxito, presencia global). */
.seccion--puntos {
	background-color: var(--wp--preset--color--superficie);
	background-image: radial-gradient(var(--wp--preset--color--superficie-brillo) 1px, transparent 1px);
	background-size: 20px 20px;
}

/* ---------------------------------------------------------------- listas */

/* Item con check cian: se repite en "Recupera el control" y en las métricas. */
.check-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.check-lista li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; align-items: start; }
.check-lista li::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: var(--wp--preset--color--cian);
	/* check dibujado como máscara: evita meter un SVG por cada item */
	-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;
}

/* ---------------------------------------------------------------- eyebrow */

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

/* ---------------------------------------------------------------- tarjetas */

.tarjeta {
	background: #fff;
	border-radius: var(--radio-tarjeta);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.tarjeta__media { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.tarjeta__cuerpo { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }

/* Métrica: tarjeta oscura con cifra en cian. */
.metrica {
	background: var(--wp--preset--color--contenedor-bajo);
	border-radius: var(--radio-tarjeta);
	padding: 2rem 1.5rem;
	text-align: center;
}
.metrica__cifra {
	color: var(--wp--preset--color--cian);
	font-size: var(--wp--preset--font-size--cifra);
	font-weight: 800;
	line-height: 1.05;
}
.metrica__etiqueta {
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--texto-tenue);
}

/*
  Testimonio: borde degradado + cola de bocadillo.
  El borde se hace con un pseudo-elemento y mask-composite porque border-image
  no respeta border-radius.
*/
.testimonio {
	position: relative;
	background: #fff;
	border-radius: var(--radio-tarjeta);
	padding: 1.75rem;
}
.testimonio::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--grad-marca);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* ---------------------------------------------------------------- grillas */

.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); }

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

/* ---------------------------------------------------------------- media */

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

/* Logos de clientes: desaturados, como en el Stitch. */
.logos-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.logos-fila img {
	filter: grayscale(1);
	opacity: 0.45;
	max-height: 34px;
	width: auto;
}

/* ------------------------------------------------------- reduce-motion */

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