/* ===== Animación menú Gutenberg (robusta) ===== */
:root {
/* cambia al color de tu marca */
}

/* Enlaces del menú en el bloque de navegación */
nav .wp-block-navigation__container .wp-block-navigation-item__content {
	display: inline-block !important;
/* asegura inline-block */
	position: relative;
	padding: .5rem .25rem;
	text-decoration: none;
	transition: color .25s var(--ease), background-size .35s var(--ease);
/* Subrayado animado con background (más fiable que ::after) */
	background-image: linear-gradient(var(--brand), var(--brand));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
}

/* Hover / foco accesible */
nav .wp-block-navigation__container .wp-block-navigation-item__content:hover,
nav .wp-block-navigation__container .wp-block-navigation-item__content:focus {
	color: var(--brand);
	background-size: 100% 2px;
}

/* Página ACTIVA en el bloque de navegación (Gutenberg) */
nav .wp-block-navigation__container .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--brand);
	background-size: 100% 2px;
}

/* Opcional: un pelín de "levitar" en hover */
nav .wp-block-navigation__container .wp-block-navigation-item__content {
	transform: translateY(0);
}

nav .wp-block-navigation__container .wp-block-navigation-item__content:hover {
	transform: translateY(-1px);
	transition: transform .25s var(--ease);
}

/* ===== Fade-in general al cargar la página ===== */
body {
	opacity: 0;
	animation: fadeInBody .9s ease forwards;
}

@keyframes fadeInBody {
	to {
		opacity: 1;
	}
}

/* ===== Animación Reveal en bloques ===== */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeUp .9s ease forwards;
}

.reveal:nth-child(1) {
	animation-delay: .2s;
}

.reveal:nth-child(2) {
	animation-delay: .4s;
}

.reveal:nth-child(3) {
	animation-delay: .6s;
}

.reveal:nth-child(4) {
	animation-delay: .8s;
}

@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===== Reveal escalonado del MENÚ (solo escritorio) ===== */
@media (min-width: 992px) {
	/* Respetar accesibilidad */
	@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__container > li,
					    .wp-block-navigation .wp-block-navigation-item {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* Estado inicial de cada item del menú */
.wp-block-navigation__container > li,
  .wp-block-navigation .wp-block-navigation-item {
	opacity: 0;
	transform: translateY(10px);
	animation: menuReveal .5s cubic-bezier(.22,.61,.36,1) forwards;
}

/* Escalonado (ajusta tiempos si quieres más/menos lento) */
.wp-block-navigation__container > li:nth-child(1),
  .wp-block-navigation .wp-block-navigation-item:nth-child(1) {
	animation-delay: .05s;
}

.wp-block-navigation__container > li:nth-child(2),
  .wp-block-navigation .wp-block-navigation-item:nth-child(2) {
	animation-delay: .15s;
}

.wp-block-navigation__container > li:nth-child(3),
  .wp-block-navigation .wp-block-navigation-item:nth-child(3) {
	animation-delay: .25s;
}

.wp-block-navigation__container > li:nth-child(4),
  .wp-block-navigation .wp-block-navigation-item:nth-child(4) {
	animation-delay: .35s;
}

.wp-block-navigation__container > li:nth-child(5),
  .wp-block-navigation .wp-block-navigation-item:nth-child(5) {
	animation-delay: .45s;
}

.wp-block-navigation__container > li:nth-child(6),
  .wp-block-navigation .wp-block-navigation-item:nth-child(6) {
	animation-delay: .55s;
}

.wp-block-navigation__container > li:nth-child(7),
  .wp-block-navigation .wp-block-navigation-item:nth-child(7) {
	animation-delay: .65s;
}

.wp-block-navigation__container > li:nth-child(8),
  .wp-block-navigation .wp-block-navigation-item:nth-child(8) {
	animation-delay: .75s;
}	
}

@keyframes menuReveal {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (min-width: 992px) {
	.wp-block-navigation__container > li,
					  .wp-block-navigation .wp-block-navigation-item {
		transform: translateY(10px) scale(.98);
	}
}

@keyframes menuReveal {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* === Animación de entrada para el logo de Yare Translate === */
header .wp-block-site-logo img,
.site-header .wp-block-site-logo img,
.wp-block-site-logo img,
.custom-logo {
	opacity: 0;
	transform: translateY(20px) scale(0.85);
/* entra más bajo y más pequeño */
	animation: ytWelcomeStrong 1s cubic-bezier(.2,.8,.2,1) forwards;
}

/* Keyframes con rebote suave */
@keyframes ytWelcomeStrong {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(0.85);
	}
	
	60% {
		opacity: 1;
		transform: translateY(-3px) scale(1.08);
	}
	
	/* rebote */
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Accesibilidad: si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	header .wp-block-site-logo img,
				  .wp-block-site-logo img,
				  .custom-logo {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ANIMACIÓN SOLO CSS PARA TEXTOS DEL HEADER */
@media (prefers-reduced-motion: no-preference) {
	/* Título del sitio */
	header .site-title,
			  header .wp-block-site-title,
			  .site-branding .site-title,
			  .wp-block-site-title a {
		opacity: 0;
		transform: translateY(14px);
		animation: yd-fadeUp .8s ease .15s both;
	}
	
	/* Tagline / descripción corta */
	header .site-description,
			  header .wp-block-site-tagline,
			  .site-branding .site-description {
		opacity: 0;
		transform: translateY(14px);
		animation: yd-fadeUp .8s ease .3s both;
	}
	
	@keyframes yd-fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

	
}

/* ===========================
   ANIMACIONES SIN JS (WORDPRESS.COM)
   =========================== */
/* 0) Accesibilidad: si el usuario pide menos movimiento, no animamos */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* 1) BOTONES — micro interacciones (hover/click) */
.wp-block-button__link,
button,
input[type="submit"],
a.button {
	transition: transform .25s ease, box-shadow .25s ease, background .3s ease;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
a.button:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.wp-block-button__link:active,
button:active,
input[type="submit"]:active,
a.button:active {
	transform: scale(.97);
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* 2) IMÁGENES — hover suave (zoom + leve brillo) */
.wp-block-image img,
.entry-content img {
	transition: transform .6s cubic-bezier(.21,.89,.24,1.11), filter .6s ease;
	border-radius: 6px;
/* opcional: esquinas suaves */
}

.wp-block-image img:hover,
.entry-content img:hover {
	transform: scale(1.03);
	filter: brightness(1.05) contrast(1.02);
}

/* 3) IMÁGENES — fade-in al entrar en viewport SIN JS
      Usamos scroll-driven animations (view-timeline) sólo si el navegador lo soporta */
@supports (animation-timeline: view()) {
	/* El contenedor de la imagen define la línea de tiempo de vista */
	.wp-block-image {
	/* usa el scroll vertical */
	}
	
	/* La imagen se anima a medida que entra en pantalla */
	.wp-block-image img {
		opacity: 0;
		transform: translateY(12px) scale(.985);
		animation-name: yd-fade-in;
		animation-duration: 1s;
		animation-fill-mode: both;
	/* Empieza cuando el bloque empieza a entrar (entry 10%)
		       y termina cuando cubre ~30% del viewport */
	}
	
	@keyframes yd-fade-in {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

	
}

/* 4) (Opcional) Hacer el efecto un pelín más corto en móvil */
@media (max-width: 640px) {
	.wp-block-image img:hover,
		  .entry-content img:hover {
		transform: scale(1.02);
	/* más sutil en pantallas táctiles */
	}
}

/* ===== Hover de fotos con el mismo "feeling" que los botones ===== */
@media (hover:hover) and (pointer:fine) {
	/* 1) Contenedores que envuelven imágenes (Gutenberg + destacadas + logo) */
	figure.wp-block-image,
		  .wp-block-post-featured-image,
		  .site-branding a.custom-logo-link, /* logo/ícono del sitio */
		  .entry-content a:has(img) {
	/* enlaces que contienen imágenes */
		display: inline-block;
		position: relative;
		transition: transform .25s ease, box-shadow .25s ease;
		transform: translateZ(0);
	/* asegúrate de que la sombra se vea aunque el tema recorte */
		overflow: visible !important;
		border-radius: 8px;
	/* opcional: esquinas suaves del bloque */
	}
	
	/* Fallback si :has() no está soportado: figuras y destacadas ya cubren la mayoría de casos */
	figure.wp-block-image:hover,
		  .wp-block-post-featured-image:hover,
		  .site-branding a.custom-logo-link:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 20px rgba(0,0,0,.18);
	}
	
	/* 2) Versión con :has(img) para más cobertura (cuando el hover es sobre el enlace contenedor) */
	.entry-content a:has(img):hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 20px rgba(0,0,0,.18);
	}
	
	/* 3) La imagen dentro acompaña con micro-zoom + leve brillo (muy sutil) */
	figure.wp-block-image img,
		  .wp-block-post-featured-image img,
		  .site-branding a.custom-logo-link img,
		  .entry-content a:has(img) img {
		transition: transform .25s ease, filter .25s ease;
		display: block;
	/* elimina jumps por inline-gap */
		border-radius: 8px;
	/* igual al contenedor */
	}
	
	figure.wp-block-image:hover img,
		  .wp-block-post-featured-image:hover img,
		  .site-branding a.custom-logo-link:hover img,
		  .entry-content a:has(img):hover img {
		transform: scale(1.02);
	/* sutil, no agresivo */
		filter: brightness(1.02);
	}
	
	/* 4) Feedback de click ("tap") como los botones */
	figure.wp-block-image:active,
		  .wp-block-post-featured-image:active,
		  .site-branding a.custom-logo-link:active,
		  .entry-content a:has(img):active {
		transform: translateY(-1px) scale(.985);
		box-shadow: 0 6px 16px rgba(0,0,0,.16);
	}
}

/* Un toque más discreto aún en pantallas pequeñas con hover */
@media (max-width: 768px) and (hover:hover) and (pointer:fine) {
	figure.wp-block-image:hover,
		  .wp-block-post-featured-image:hover,
		  .site-branding a.custom-logo-link:hover,
		  .entry-content a:has(img):hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0,0,0,.16);
	}
	
	figure.wp-block-image:hover img,
		  .wp-block-post-featured-image:hover img,
		  .site-branding a.custom-logo-link:hover img,
		  .entry-content a:has(img):hover img {
		transform: scale(1.015);
	}
}

/* ===== MÓVIL/TOUCH: invitación a tocar + feedback al tap (sin JS) ===== */
@media (hover:none) and (pointer:coarse) {
	/* HINT: sutil sombra “respirando” en imágenes clicables (enlaces con img) */
	a:has(> img), a:has(img) {
		position: relative;
		display: inline-block;
		border-radius: 10px;
		overflow: hidden;
	/* para recortar el ripple */
		animation: tap-breathe 3.2s ease-in-out infinite;
	}
	
	@keyframes tap-breathe {
	0%, 100% {
		box-shadow: 0 0 0 rgba(0,0,0,0);
	}
	
	50% {
		box-shadow: 0 8px 18px rgba(0,0,0,.10);
	}
}

/* Imagen interna suave */
a:has(img) img {
	display: block;
	transition: transform .2s ease, filter .2s ease;
	border-radius: inherit;
}

/* FEEDBACK AL TAP (presionado) */
a:has(img):active {
	transform: translateY(-2px) scale(.985);
	box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

a:has(img):active img {
	filter: brightness(1.03);
}

/* Ripple centrado (sin JS) */
a:has(img)::after {
	content: "";
	position: absolute;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transform: scale(0);
	background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), transparent 45%);
}

a:has(img):active::after {
	animation: tap-ripple .45s ease-out forwards;
}

@keyframes tap-ripple {
	0% {
		opacity: .35;
		transform: scale(0);
	}
	
	100% {
		opacity: 0;
		transform: scale(2.6);
	}
}

/* FALLBACK (si el navegador no soporta :has): figuras/featured y logo */
figure.wp-block-image,
  .wp-block-post-featured-image,
  .site-branding a.custom-logo-link {
	position: relative;
	display: inline-block;
	border-radius: 10px;
	overflow: hidden;
	animation: tap-breathe 3.2s ease-in-out infinite;
}

figure.wp-block-image:active,
  .wp-block-post-featured-image:active,
  .site-branding a.custom-logo-link:active {
	transform: translateY(-2px) scale(.985);
	box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

figure.wp-block-image:active img,
  .wp-block-post-featured-image:active img,
  .site-branding a.custom-logo-link:active img {
	filter: brightness(1.03);
}

figure.wp-block-image:active::after,
  .wp-block-post-featured-image:active::after,
  .site-branding a.custom-logo-link:active::after {
	content: "";
	position: absolute;
	border-radius: inherit;
	pointer-events: none;
	animation: tap-ripple .45s ease-out forwards;
	background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), transparent 45%);
}	
}