/*
 * Red I+E — ajuste fino.
 *
 * REGLA: aquí SOLO va lo que theme.json y el block markup no logran
 * (decoración de marca, hovers, íconos mask, responsive). Todo lo que sea
 * color, tipografía o espaciado sale de los presets de theme.json, que a su
 * vez son los tokens del design system «Red I+E LATAM».
 *
 * Equivalencias con los tokens del DS:
 *   --wp--preset--color--primary        = --green-400 #2dcc70
 *   --wp--preset--color--primary-dark   = --green-500 #27b163 (hover)
 *   --wp--preset--color--primary-press  = --green-600 #1e9e56 (pulsado)
 *   --wp--preset--color--contrast       = --neutral-600 #525252 (tinta de marca)
 *   --wp--preset--color--surface        = --neutral-100 #f3f4f6 (banda)
 *   --wp--preset--shadow--sm/md/lg/brand = --shadow-sm/md/lg/brand
 *   --wp--custom--radius--*             = --radius-*
 *   --wp--custom--motion--*             = --dur-* / --ease-*
 */

/* -------------------------------------------------------------------------
 * 1. Tipografía
 *
 * Raleway va auto-hospedada en assets/fonts/ (300, 400, 500, 600, 700 y 800)
 * y se declara con fontFace en theme.json: WordPress genera los @font-face
 * solos, así que aquí no hay nada que escribir.
 *
 * Para añadir un peso: copiar el .woff2 a assets/fonts/ y sumarlo al array
 * fontFace de theme.json. NO instalar la fuente desde la Biblioteca del
 * Editor: quedaría duplicada (BD + uploads) y dejaría de viajar con el tema.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * 2. Cabecera
 * ---------------------------------------------------------------------- */

/* La cabecera se pega arriba al hacer scroll. */
.redie-navbar {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

.redie-topbar a {
	color: inherit;
}

/* La fila del logo y el menú ocupa el ancho `wide` (1180px), el mismo que las
   secciones de la página: sin esto la cabecera se queda en `content` (760px)
   y se ve más estrecha que todo lo que tiene debajo. */
.redie-navbar__inner {
	align-items: center;
}

.redie-navbar__logo {
	margin: 0;
	flex: 0 0 auto;
	line-height: 0; /* mata el hueco del descender bajo el logotipo */
}

.redie-navbar__logo img {
	display: block;
	height: auto;
}

.redie-navbar__end {
	align-items: center;
}

/* El menú no debe encoger antes que el CTA. */
.redie-navbar__end .wp-block-navigation {
	flex: 0 1 auto;
}

/* Subrayado verde que crece bajo el ítem de menú activo o en hover. */
.redie-navbar .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}

.redie-navbar .wp-block-navigation-item__content:hover,
.redie-navbar .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-dark);
}

.redie-navbar .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}

.redie-navbar .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.redie-navbar .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------------
 * 3. Íconos por CSS mask (data-URI)
 *
 * No usamos <svg> dentro de bloques HTML: el editor los aísla en un iframe
 * y se ven rotos. Con `mask` el ícono hereda currentColor y se ve igual en
 * el editor y en el front.
 * ---------------------------------------------------------------------- */
.redie-ci,
.redie-fc-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.redie-ci::before,
.redie-fc-item::before {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.redie-fc-item::before {
	color: var(--wp--preset--color--accent);
	width: 1.15em;
	height: 1.15em;
}

.redie-ci--mail::before,
.redie-fc-item--mail::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5Z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5Z"/></svg>');
}

.redie-ci--phone::before,
.redie-fc-item--phone::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1Z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1Z"/></svg>');
}

.redie-fc-item--pin::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z"/></svg>');
}

/* -------------------------------------------------------------------------
 * 4. Tarjetas (estilo de bloque `redie-card` + tarjetas de entrada)
 *
 * DS: radio 16px en tarjetas, sin borde de color, sombra suave en reposo y
 * media en hover, elevación de 2px. Nada en esta marca usa un borde
 * izquierdo de color como acento.
 * ---------------------------------------------------------------------- */
.redie-card,
.is-style-redie-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--sm);
	transition: box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
		transform var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-standard);
}

.redie-card:hover,
.is-style-redie-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

.redie-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}

.redie-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-dark);
}

/* -------------------------------------------------------------------------
 * 5. Botones
 *
 * El relleno, el radio píldora y la tipografía salen de theme.json
 * (elements.button). Aquí solo las variantes que el núcleo no cubre y el
 * estado pulsado (escala 0.98, DS «Press states»).
 * ---------------------------------------------------------------------- */
.wp-block-button__link {
	transition: background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
		color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
		transform var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-standard);
}

.wp-block-button__link:active {
	transform: scale(0.98);
}

.wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--ring-focus);
}

/* Contorno verde: acción secundaria sobre fondo claro. */
.wp-block-button.is-style-redie-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary-dark);
	border: 1px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-redie-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-press);
	box-shadow: none;
}

/* Fantasma: sobre imágenes o paneles oscuros. */
.wp-block-button.is-style-redie-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px currentColor;
}

.wp-block-button.is-style-redie-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-press);
}

/* -------------------------------------------------------------------------
 * 6. Fachada de video (front.js la reemplaza por el iframe al hacer clic)
 * ---------------------------------------------------------------------- */
.redie-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	cursor: pointer;
	/* Las portadas son cuadradas y el rótulo «Bootcamp» va en su tercio
	   superior: encuadramos algo más arriba para no cortarlo al recortar
	   a 16:9. */
	background: var(--wp--preset--color--dark) center 28% / cover no-repeat;
}

.redie-video iframe,
.redie-video img {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

.redie-video__play {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: 72px;
	height: 72px;
	border: 0;
	border-radius: 50%;
	/* Círculo blanco con el play verde: el botón va casi siempre sobre el
	   velo verde de la portada, donde un botón verde se pierde. */
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
	box-shadow: var(--wp--preset--shadow--md);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}

.redie-video__play::before {
	content: "";
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></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="M8 5v14l11-7z"/></svg>') center / contain no-repeat;
}

.redie-video:hover .redie-video__play {
	transform: scale(1.08);
	box-shadow: var(--wp--preset--shadow--brand);
}

/* -------------------------------------------------------------------------
 * 7. Cinta de aliados (marquesina). front.js duplica los logos y la anima.
 * ---------------------------------------------------------------------- */
.redie-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.redie-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	width: max-content;
	will-change: transform;
}

.redie-marquee__track img {
	max-height: 56px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
		opacity var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}

.redie-marquee__track img:hover {
	filter: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.redie-marquee {
		overflow-x: auto;
	}
}

/* -------------------------------------------------------------------------
 * 8. Portada y secciones
 *
 * Las dos piezas decorativas de la marca —los arcos gris claro y la marca de
 * agua del isotipo al 5%— son pseudo-elementos: no ensucian el markup y el
 * personal no puede borrarlas por accidente desde el editor.
 * ---------------------------------------------------------------------- */

.redie-hero,
.redie-section {
	position: relative;
	overflow: hidden;
}

.redie-hero > *,
.redie-section > * {
	position: relative;
	z-index: 1;
}

/* --- Hero -------------------------------------------------------------- */

/* profesor-hero.webp es un recorte con fondo transparente: los arcos van
 * detrás, dibujados aquí (DS → «Decorative shapes»). */
.redie-hero__media {
	position: relative;
}

.redie-hero__media::before,
.redie-hero__media::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

/* Arco grande: rectángulo con la parte superior totalmente redondeada. */
.redie-hero__media::before {
	right: 12%;
	top: 4%;
	width: 52%;
	max-width: 260px;
	height: 78%;
	background: var(--wp--preset--color--surface);
	border-radius: 9999px 9999px 0 0;
}

/* Arco menor y desplazado: rompe la simetría sin cortar al primero. */
.redie-hero__media::after {
	right: 46%;
	top: 26%;
	width: 30%;
	max-width: 150px;
	height: 56%;
	background: var(--wp--preset--color--surface-soft);
	border-radius: 9999px 9999px 0 0;
}

.redie-hero__photo {
	position: relative;
	z-index: 1;
	margin: 0;
}

.redie-hero__photo img {
	width: 100%;
	max-width: 537px; /* tamaño nativo: no la escalamos hacia arriba */
	height: auto;
	margin-inline: auto;
	display: block;
}

/* DS: el titular grande de la home va en Regular; solo el tramo destacado
 * sube a Bold. Es el rasgo tipográfico más reconocible de la marca. */
.redie-hero__title {
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

.redie-hero__title strong {
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

.redie-hero__lead {
	max-width: 46ch;
	line-height: 1.7;
}

/* --- Etiquetas de sección (eyebrow) ----------------------------------- */

.redie-kicker {
	color: var(--wp--preset--color--contrast-soft);
	margin-bottom: 0.35rem;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* Variante con la rayita verde de 2px delante. */
.redie-kicker--dash {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.redie-kicker--dash.has-text-align-center {
	justify-content: center;
}

.redie-kicker--dash::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--primary);
}

/* Titular en versalitas del folleto y las piezas sociales. */
.redie-title-caps {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
}

.redie-title-caps strong {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}

/* --- ¿Quiénes somos? --------------------------------------------------- */

.redie-objetivo {
	border-radius: var(--wp--custom--radius--lg);
}

/* Panel carbón del folleto. */
.redie-panel {
	color: var(--wp--preset--color--base);
}

.redie-panel p {
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.7;
}

/* La barra verde de 6px es el único «borde izquierdo» de la marca. */
.redie-feature {
	padding-left: var(--wp--preset--spacing--20);
	border-left: 6px solid var(--wp--preset--color--primary);
}

.redie-feature > * {
	margin-block: 0;
}

.redie-feature > * + * {
	margin-top: var(--wp--preset--spacing--15);
}

/* Separación sobre las rejillas de Query.
 *
 * El margen NO va como atributo del bloque Query: con `style.spacing.margin`
 * puesto ahí, el editor reinicia el layout del post-template hijo de `grid` a
 * `default` al cargar la página, y la rejilla de 3 columnas se ve en 1 sola
 * dentro del editor (en el front salía bien). Comprobado por bisección.
 * Usamos el mismo token de espaciado, solo que desde aquí. */
.redie-bootcamp-grid {
	margin-top: var(--wp--preset--spacing--40);
}

.redie-noticias {
	margin-top: var(--wp--preset--spacing--50);
}

/* --- Bootcamps -------------------------------------------------------- */

.redie-bootcamp-list .wp-block-post-title {
	margin: 0 0 0.35rem;
	font-weight: 500;
	line-height: 1.5;
}

.redie-bootcamp-list .wp-block-post-title,
.redie-bootcamp-list .wp-block-post-title a:where(:not(:hover)) {
	color: var(--wp--preset--color--contrast-soft);
}

.redie-bootcamp-list .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-dark);
}

/* Las portadas ya traen el velo verde incrustado: aquí solo el radio de 16px
 * y la elevación de 2px en hover. */
.redie-bootcamp-card img {
	border-radius: var(--wp--custom--radius--lg);
	transition: transform var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-standard),
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}

.redie-bootcamp-card:hover img {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* En el archivo la tarjeta sí lleva título debajo de la portada. */
.redie-bootcamp-card .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--20);
}

.redie-bootcamp-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}

.redie-bootcamp-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-dark);
}

/* --- Noticias --------------------------------------------------------- */

/* Marca de agua: isotipo sobredimensionado al 5%, sangrando por la izquierda. */
.redie-section--noticias::before {
	content: "";
	position: absolute;
	left: -110px;
	top: 40px;
	width: 380px;
	height: 380px;
	z-index: 0;
	opacity: 0.05;
	background: url("../img/redie-isotipo.svg") left center / contain no-repeat;
	pointer-events: none;
}

.redie-noticia {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--sm);
	transition: box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}

.redie-noticia:hover {
	box-shadow: var(--wp--preset--shadow--md);
}

/* DS: la foto de noticia hace zoom a 1.04 en 360ms; la tarjeta no se mueve. */
.redie-noticia__media {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
}

.redie-noticia__media img {
	transition: transform var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out);
}

.redie-noticia:hover .redie-noticia__media img {
	transform: scale(1.04);
}

.redie-noticia .wp-block-post-title {
	font-weight: 600;
	line-height: 1.25;
}

.redie-noticia .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}

.redie-noticia .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-dark);
}

.redie-noticia .wp-block-post-excerpt {
	color: var(--wp--preset--color--contrast-soft);
}

/* --- Aliados ---------------------------------------------------------- */

/* DS PartnerCard: cuadrado blanco, radio 8px, sombra muy suave, logo a todo
 * color con mucho aire alrededor. */
.redie-aliados .redie-aliado {
	display: grid;
	place-items: center;
	margin: 0;
	/* DS: cuadrado de 200px con 32px de aire; el logo ocupa como mucho 136px. */
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--35);
	width: 200px;
	height: 200px;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--xs);
	transition: box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}

.redie-aliados .redie-aliado:hover {
	box-shadow: var(--wp--preset--shadow--sm);
}

/* Los logos aliados vienen con proporciones dispares: los encajamos. */
.redie-aliados .redie-aliado img {
	max-height: 136px;
	width: auto;
	object-fit: contain;
}

/* --- Conviértete en miembro ------------------------------------------- */

.redie-miembro__lead {
	max-width: 62ch;
	margin-inline: 0; /* si no, el layout constrained lo centra y se descuelga */
}

/* Tarjeta blanca que sostiene el formulario sobre la banda gris. */
.redie-miembro__card {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* --- Formulario de HubSpot -------------------------------------------
 * HubSpot inyecta su propio markup (.hs-form). Lo alineamos con el resto
 * del sitio: dos columnas, inputs tipo píldora y botón verde.
 *
 * OJO: esto SOLO se aplica si el formulario se pinta EN LÍNEA, dentro del
 * documento. Si en HubSpot el formulario tiene estilos propios, el embed lo
 * mete en un <iframe> y ningún CSS de aquí lo alcanza: entonces el aspecto se
 * configura en el editor de formularios de HubSpot (pestaña de estilos),
 * eligiendo que herede los estilos de la página. Ver docs/07-design-system.md.
 * ------------------------------------------------------------------- */

/* Mientras venga en iframe, al menos que ocupe el ancho de la tarjeta. */
.redie-hubspot iframe {
	width: 100%;
	display: block;
	border: 0;
}

.redie-hubspot .hs-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--40);
}

.redie-hubspot .hs-form-field {
	margin-bottom: var(--wp--preset--spacing--20);
}

.redie-hubspot .hs-form-field > label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.redie-hubspot .hs-input:not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
	padding: 0.6875rem 1.125rem;
	border: 1px solid var(--wp--preset--color--border-input);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	transition: border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}

.redie-hubspot textarea.hs-input {
	border-radius: var(--wp--custom--radius--xl);
}

/* DS «Focus»: anillo verde al 35% más el borde verde en el campo. */
.redie-hubspot .hs-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--ring-focus);
}

.redie-hubspot .hs-error-msg,
.redie-hubspot .hs-error-msgs {
	color: #d64545;
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
	margin: 0.35rem 0 0;
	padding: 0;
}

/* Los grupos de casillas y el botón ocupan el ancho completo. */
.redie-hubspot .hs-fieldtype-booleancheckbox,
.redie-hubspot .hs-fieldtype-radio,
.redie-hubspot .hs-fieldtype-checkbox,
.redie-hubspot .hs_submit,
.redie-hubspot .hs-richtext,
.redie-hubspot .hs-form > .hs-form-field:has(textarea) {
	grid-column: 1 / -1;
}

.redie-hubspot .inputs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.redie-hubspot .hs_submit {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--20);
}

.redie-hubspot .hs-button {
	padding: 0.75rem 1.875rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
		transform var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-standard);
}

.redie-hubspot .hs-button:hover {
	background: var(--wp--preset--color--primary-dark);
	box-shadow: var(--wp--preset--shadow--brand);
}

.redie-hubspot .hs-button:active {
	background: var(--wp--preset--color--primary-press);
	transform: scale(0.98);
}

/* --- Pie -------------------------------------------------------------- */

.redie-footer {
	border-top: 1px solid var(--wp--preset--color--border);
}

.redie-footer__logo {
	margin: 0;
	line-height: 0;
}

.redie-footer__wordmark {
	margin: 0;
	line-height: 1.35;
}

/* Rótulo de columna: pequeño, en versalitas y con tracking ancho. */
.redie-footer__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--contrast);
}

.redie-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.redie-footer__links a,
.redie-footer .redie-fc-item a,
.redie-footer__legal a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: none;
	transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}

.redie-footer__links a:hover,
.redie-footer .redie-fc-item a:hover,
.redie-footer__legal a:hover {
	color: var(--wp--preset--color--primary-dark);
}

/* Los ítems de contacto llevan su ícono verde por máscara CSS. */
.redie-footer .redie-fc-item {
	margin-bottom: var(--wp--preset--spacing--15);
}

.redie-footer__social .wp-social-link {
	transition: transform var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-standard);
}

.redie-footer__social .wp-social-link:hover {
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
 * 9. Responsive
 *
 * WP no expone breakpoints en el editor: el responsive se controla aquí.
 * El menú usa el bloque Navigation → hamburguesa nativa en móvil.
 * ---------------------------------------------------------------------- */
@media (max-width: 781px) {

	/* La barra superior estorba en pantallas pequeñas. */
	.redie-topbar {
		display: none;
	}

	/* El CTA de la cabecera cabe mal junto a la hamburguesa.
	   Hacen falta tres clases: WP imprime .wp-block-buttons.is-layout-flex
	   { display:flex } y con un solo selector nos gana por especificidad. */
	.redie-navbar .wp-block-buttons.redie-navbar__cta {
		display: none;
	}

	.redie-navbar {
		position: static;
	}

	.redie-footer .wp-block-columns {
		gap: var(--wp--preset--spacing--40);
	}

	.redie-video__play {
		width: 56px;
		height: 56px;
	}

	/* Hero centrado y sin arcos: en móvil estorban detrás del recorte. */
	.redie-hero__title,
	.redie-hero__lead {
		text-align: center;
	}

	.redie-hero__lead {
		margin-inline: auto;
	}

	.redie-kicker--dash {
		justify-content: center;
	}

	.redie-hero .wp-block-buttons {
		justify-content: center;
	}

	.redie-hero__media::before,
	.redie-hero__media::after {
		display: none;
	}

	/* La marca de agua satura la sección en pantallas estrechas. */
	.redie-section--noticias::before {
		display: none;
	}

	/* El bloque Grupo en rejilla no colapsa solo: con columnCount fijo el
	   panel del folleto queda en tres columnas de dos palabras. */
	.redie-panel .wp-block-group.is-layout-grid {
		grid-template-columns: 1fr;
	}

	/* La tarjeta de aliado se encoge con la pantalla, manteniéndose cuadrada. */
	.redie-aliados .redie-aliado {
		width: min(200px, 100%);
		height: auto;
		aspect-ratio: 1;
		padding: var(--wp--preset--spacing--30);
	}

	.redie-bootcamp-list .wp-block-post-title {
		text-align: left;
	}

	/* 48px de aire dentro de la tarjeta se come el ancho útil en móvil. */
	.redie-miembro__card {
		padding: var(--wp--preset--spacing--30) !important;
	}

	.redie-hubspot .hs-form {
		grid-template-columns: 1fr;
	}

	.redie-hubspot .hs_submit {
		justify-content: stretch;
	}

	.redie-hubspot .hs-button {
		width: 100%;
	}
}