/* Utilidades compartidas entre patrones del home de Ruta Combu. */

/* Imagen circular dentro de un bloque Media & Text (bloque-dinamica-principal, bloque-registro-ticket). */
.rc-mediatext-circle .wp-block-media-text__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.rc-mediatext-circle .wp-block-media-text__media img {
	width: min(70%, 380px);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

/* Animacion de entrada al hacer scroll (activada via IntersectionObserver, ver fade-in.js). */
.rc-fade-in {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 350ms ease, transform 350ms ease;
}

.rc-fade-in.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rc-fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Tarjetas del grid-servicios: bordes redondeados, sombra suave, zoom leve en la imagen al hover. */
.rc-service-card {
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(16, 24, 40, .08);
	background: var(--wp--preset--color--blanco);
	transition: box-shadow 200ms ease;
}

.rc-service-card:hover,
.rc-service-card:focus-within {
	box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
}

.rc-service-card__image img {
	display: block;
	width: 100%;
	transition: transform 300ms ease;
}

.rc-service-card:hover .rc-service-card__image img,
.rc-service-card:focus-within .rc-service-card__image img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.rc-service-card__image img {
		transition: none;
	}
	.rc-service-card:hover .rc-service-card__image img,
	.rc-service-card:focus-within .rc-service-card__image img {
		transform: none;
	}
}

/*
 * El estilo global de enlaces (theme.json elements.link) pinta los <a> en
 * reposo de azul-institucional y en :hover de rojo-institucional. Sobre el
 * fondo azul-oscuro del header/footer esos colores dan ~1.4:1 y ~2.1:1 de
 * contraste (casi invisibles). Se sobreescribe aqui para cumplir AA: texto
 * blanco siempre, con subrayado (no solo color) para indicar hover/foco.
 */
.site-header a,
.site-footer a {
	color: var(--wp--preset--color--blanco);
	text-decoration: none;
}

.site-header a:hover,
.site-header a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--wp--preset--color--blanco);
	text-decoration: underline;
}

/*
 * El layout "grid" del Group con columnCount fijo no colapsa solo en
 * pantallas chicas (a diferencia de Columns). Se fuerza el responsive aqui.
 */
@media (max-width: 782px) {
	.rc-services-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.rc-services-grid {
		grid-template-columns: 1fr !important;
	}
}


/* ============================================================
 *    Mejora visual  Home Ruta Combu (logo header, tarjetas, barra stats)
 *    ============================================================ */

/* 1) Logo en blanco sobre el header azul oscuro para maximo contraste,
 *       igual que en larutacombu.com (logo original es negro solido). */
.site-header__logo img {
	filter: brightness(0) invert(1);
}

/* 2) Tarjetas de servicio: barra de acento de color arriba (rotando los
 *       4 colores de marca) + elevacion suave en hover para dar dinamismo. */
.rc-service-card {
	position: relative;
	transition: transform 250ms ease, box-shadow 200ms ease;
}

.rc-service-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--wp--preset--color--azul-institucional);
	z-index: 2;
}

.rc-services-grid > .rc-service-card:nth-of-type(4n+2)::before {
	background: var(--wp--preset--color--rojo-institucional);
}

.rc-services-grid > .rc-service-card:nth-of-type(4n+3)::before {
	background: var(--wp--preset--color--naranja-complementario);
}

.rc-services-grid > .rc-service-card:nth-of-type(4n)::before {
	background: var(--wp--preset--color--celeste-complementario);
}

.rc-service-card:hover,
.rc-service-card:focus-within {
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
	.rc-service-card {
		transition: none;
	}
	.rc-service-card:hover,
	.rc-service-card:focus-within {
		transform: none;
	}
}

/* 3) Barra de confianza (estadisticas): franja de acento en degradado de
 *       marca arriba de la barra, ahora de ancho completo (ver patron PHP). */
.rc-stats-bar {
	position: relative;
}

.rc-stats-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--rojo-institucional), var(--wp--preset--color--naranja-complementario), var(--wp--preset--color--azul-institucional));
}
}
}
	}
	}
}
}
}
}
}
}
}
}