/*
 * Innovación UC — ajustes sobre el Kit Digital UC.
 * Solo lo que el Kit no resuelve; los componentes van con sus clases originales.
 * Colores y medidas salen de las variables del Kit (--primary, --error, etc.).
 */

/* Enlace "Saltar al contenido": visible solo al recibir foco. */
.iuc-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 8px 16px;
	background: var(--white);
	color: var(--blue);
}

/* Título y logo enlazados sin subrayado. */
.iuc-brand,
.iuc-brand:hover,
.iuc-brand:focus {
	text-decoration: none;
}

/* ---------- Header ---------- */

/* El menú principal sobre las etiquetas (uc-tag, z-index 10) y el contenido. */
.uc-navbar .uc-navbar_nav {
	position: relative;
	z-index: 99;
}

/* Subítems activos del desplegable: el Kit no trae estilo para este estado. */
.uc-navbar-dropdown_menu .uc-btn.active {
	color: var(--primary);
	font-weight: 700;
}

/* Footer del desplegable como <li> (HTML válido): sin viñeta. */
.uc-navbar-dropdown_menu .dropdown_item--footer {
	list-style: none;
}

/* Buscador del header: ocupa su columna y queda alineado a la derecha. */
.iuc-header-search {
	max-width: 360px;
	margin-left: auto;
}
.iuc-header-search input[type="search"]::-webkit-search-cancel-button,
.iuc-search-inline input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Buscador en el cuerpo (404, resultados). */
.iuc-search-inline {
	max-width: 480px;
}

/* GTM <noscript> sin CSS inline. */
.iuc-gtm-frame {
	display: none;
	visibility: hidden;
}

/* ---------- Portada ---------- */

/* Tag oscuro (mismo azul noche del header alpha). */
.uc-tag.iuc-tag--dark,
.uc-tag.iuc-tag--dark:hover {
	background-color: var(--darkblue);
}

/* Título de la tarjeta del hero, más contenido que un h2 de página. */
.iuc-home-hero .uc-card h2 {
	font-size: 1.5rem;
	line-height: 1.3;
	font-weight: 500;
}

/* Franja de bienvenida bajo el hero. */
.iuc-home-intro {
	background-color: var(--darkblue);
	border-top: 4px solid var(--primary);
	padding: 32px 0;
}

/*
 * Grilla "Explora el ecosistema": cards con imagen de fondo del Kit
 * (card-bg--image, 532 px fijos) llevados a la altura del diseño.
 */
.uc-card.iuc-eco-card {
	height: 320px;
}
.uc-card.card-bg--image.iuc-eco-card {
	background-color: var(--blue);
}
.uc-card.card-bg--image.iuc-eco-card > a {
	display: block;
	height: 100%;
}
.uc-card.card-bg--image.iuc-eco-card > a > img.uc-card-img {
	min-height: 0;
	max-height: none;
	height: 100%;
}

/* Card destacado azul noche (el Kit solo trae fondo azul primario). */
.uc-card.iuc-card--dark {
	background-color: var(--darkblue);
}
.uc-card.iuc-card--dark .btn-featured {
	justify-content: space-between;
}
.uc-text-divider.iuc-divider--white {
	background-color: var(--white);
}

/*
 * Título de sección con "Ver todas" a la derecha: en móvil el título se
 * parte en líneas y el enlace queda a su lado (no baja a otra fila).
 */
.iuc-section-head {
	gap: 12px;
}
.iuc-section-head h2 {
	flex: 0 1 auto;
	min-width: 0;
}
.iuc-section-head .btn-inline {
	flex-shrink: 0;
	white-space: nowrap;
}
/*
 * La decoración va dentro del h2, unida a la última palabra
 * (iuc_heading_decorated): si el título se parte, bajan juntas.
 */
.iuc-nowrap {
	white-space: nowrap;
}
.iuc-section-head h2 .uc-heading-decoration {
	vertical-align: middle;
}
@media (max-width: 767.98px) {
	.iuc-section-head h2 .uc-heading-decoration {
		margin-left: 16px;
	}
}

/*
 * Carrusel "Capacidades e infraestructura" ("Carrusel de cards" del Kit:
 * card-bg--image de 532 px de alto y 380 px de ancho máximo, que el
 * ejemplo pone en línea). Sin foto destacada queda el fondo azul noche.
 */
.iuc-capacidades .uc-carousel-cards {
	padding-top: 32px;
}
.uc-card.iuc-cap-card {
	max-width: 380px;
}
.uc-card.iuc-cap-card--sin-foto {
	background-color: var(--darkblue);
}
.uc-card.iuc-cap-card > a {
	display: block;
	height: 100%;
}

/*
 * Carrusel "Próximos eventos" ("Carrusel de cards de eventos" del Kit). La
 * imagen sube 50 px sobre el carrusel: se deja aire bajo el título. El
 * recuadro de la fecha lleva el borde azul noche del diseño.
 */
.iuc-eventos .uc-carousel-cards {
	padding-top: 80px;
}
.card-type--event .card-type--date {
	border-top-color: var(--darkblue);
}
/*
 * En móvil la imagen sale del carrusel (home-eventos.php). Si la ventana se
 * achica después de cargar, al menos no sobresale ni tapa las flechas.
 */
@media (max-width: 991.98px) {
	.iuc-eventos .featured-image-container {
		min-height: 280px;
	}
	.iuc-eventos .featured-image-container .uc-card-event-featured_image {
		top: 0;
		width: 100%;
		height: 100%;
		margin-top: 0;
	}
}

/*
 * "¿Eres una empresa?": foto 16:9 a la derecha (3/4 del contenedor) y el
 * card encima, centrado en vertical a la izquierda. En móvil, el card sube
 * 40 px sobre la foto.
 */
.iuc-empresas__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.iuc-empresas__card.uc-card {
	position: relative;
	margin: -40px 16px 0;
}
/*
 * Carrusel dentro del contenedor (Actualidad, De la Idea al Impacto): el del
 * Kit ocupa todo el ancho de la ventana y deja asomar el card siguiente;
 * aquí se recorta al margen. Los 8 px de cada lado dejan ver la sombra de
 * los cards de las puntas sin mostrar el siguiente (gutter de 32 px).
 * El JS del Kit escribe el ancho en línea (100vw): solo se le gana con
 * !important.
 */
.uc-carousel-cards.iuc-carousel--contenido {
	width: calc(100% + 16px) !important;
	left: 0;
	margin: 0 -8px;
	padding: 32px 8px 8px;
}

/* Cards de notas (Actualidad, De la Idea al Impacto): título sin subrayado
   salvo al pasar el mouse, y «Ver más» siempre abajo. */
.iuc-nota-card .h4 a {
	text-decoration: none;
}
.iuc-nota-card .h4 a:hover,
.iuc-nota-card .h4 a:focus {
	text-decoration: underline;
}
.iuc-nota-card .h4 {
	margin-bottom: 24px;
}

.iuc-empresas__card .btn-featured,
.iuc-ini-card .btn-featured {
	justify-content: space-between;
}
@media (min-width: 992px) {
	.iuc-empresas {
		position: relative;
		display: flex;
		align-items: center;
	}
	.iuc-empresas__img {
		width: 75%;
		margin-left: 25%;
	}
	.iuc-empresas__card.uc-card {
		position: absolute;
		left: 0;
		width: 41.666%;
		margin: 0;
	}
}

/* ---------- Ecosistema: ficha y listados ---------- */

/* Foto de cabecera bajo el header alpha (navbar--absolute). */
.iuc-cover {
	position: relative;
	height: 240px;
	background-color: var(--darkblue);
}
.iuc-cover__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 992px) {
	.iuc-cover {
		height: 380px;
	}
}

/* Caja blanca que sube sobre la foto (redondeado de 4 px del Kit). */
.iuc-overlap {
	position: relative;
	margin-top: -40px;
}
.iuc-overlap .iuc-overlap__box {
	background-color: var(--white);
	border-radius: 4px 4px 0 0;
	padding: 24px 20px 0;
}
@media (min-width: 992px) {
	.iuc-overlap {
		margin-top: -80px;
	}
	.iuc-overlap .iuc-overlap__box {
		padding: 32px 40px 0;
	}
}

/* Imagen de los cards de iniciativa con proporción fija. */
.uc-card .iuc-card-img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

/* ---------- Footer ---------- */

/* Sello de acreditación a su tamaño natural (148×269). */
.uc-footer .iuc-footer-seal {
	width: 100%;
	max-width: 148px;
}

/* ---------- Formularios (Contact Form 7 + Kit) ---------- */

/* Recuadro de la cláusula de privacidad (en el Kit va con estilo inline). */
.iuc-privacy-box {
	border: 1px solid var(--lightgray-a);
	border-radius: 4px;
}

/* Campos con error y mensajes de validación con el rojo del Kit. */
.wpcf7 .uc-input-style.wpcf7-not-valid {
	border-color: var(--error);
}
.wpcf7 .wpcf7-not-valid-tip {
	color: var(--error);
	font-size: 0.875rem;
	margin-top: 4px;
}

/*
 * Checkbox de CF7 con el aspecto del uc-form-check del Kit. CF7 envuelve el
 * <input> en <span>, así que el label no es hermano directo y los estados
 * se leen con :has().
 */
.uc-form-check .wpcf7-form-control-wrap {
	position: absolute;
}
.uc-form-check .wpcf7-list-item {
	margin: 0;
}
.uc-form-check .wpcf7-form-control-wrap + label:before,
.uc-form-check .wpcf7-form-control-wrap + label:after {
	border-radius: 5px;
}
.uc-form-check .wpcf7-form-control-wrap:has(input:checked) + label {
	font-weight: 500;
}
.uc-form-check .wpcf7-form-control-wrap:has(input:checked) + label:after {
	background: var(--primary) url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.uc-form-check .wpcf7-form-control-wrap:has(input:focus-visible) + label:before {
	border: 2px solid var(--primary);
	box-shadow: 0 0 6px var(--primary);
}
.uc-form-check .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	display: none;
}

/* Respuesta del formulario: alerta del Kit (theme.js le pone uc-alert). */
.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}
.wpcf7 form .wpcf7-response-output.uc-alert {
	padding: 12px 16px;
}
.wpcf7 .wpcf7-spinner {
	vertical-align: middle;
}