/*
 * Piezas compartidas por los bloques de sección: botones, migas, el grano
 * de las fotos y las animaciones del diseño. Cada bloque trae además su
 * propio style.css con lo que es solo suyo.
 */

.inc-sec {
	font-family: var(--wp--preset--font-family--barlow, Barlow, system-ui, sans-serif);
	color: #141614;
}

.inc-sec *,
.inc-sec *::before,
.inc-sec *::after {
	box-sizing: border-box;
}

.inc-sec img {
	max-width: none;
}

/* Botones píldora. El tamaño lo pone cada sección; aquí, color y comportamiento. */
.inc-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	transition: background-color .25s, color .25s;
}

.inc-btn--verde { background: #62CD24; color: #141614; }
.inc-btn--verde:hover { background: #fff; color: #141614; }
.inc-btn--tinta { background: #141614; color: #fff; }
.inc-btn--tinta:hover { background: #62CD24; color: #141614; }
.inc-btn--tinta-claro { background: #141614; color: #fff; }
.inc-btn--tinta-claro:hover { background: #fff; color: #141614; }
.inc-btn--borde { border: 1.5px solid #141614; color: #141614; }
.inc-btn--borde:hover { background: #141614; color: #fff; }

/* Migas de pan sobre foto oscura. */
.inc-migas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	color: #B9BDB9;
}

.inc-migas a { color: #B9BDB9; text-decoration: none; }
.inc-migas a:hover { color: #fff; }
.inc-migas [aria-current] { color: #fff; font-weight: 600; }

/* Migas sobre fondo claro (ficha de prenda). */
.inc-migas--clara { color: #666D67; }
.inc-migas--clara a { color: #666D67; }
.inc-migas--clara a:hover { color: #141614; }
.inc-migas--clara [aria-current] { color: #141614; }

/* Foto de fondo que llena su caja. */
.inc-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.inc-zoom { animation: incZoom 26s ease-in-out infinite alternate; }

/* El velo oscuro con grano sobre las fotos. Cada sección elige su degradado. */
.inc-velo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: url(../img/grano.webp), var(--inc-velo, linear-gradient(90deg, rgba(12, 14, 12, .92) 0%, rgba(12, 14, 12, .72) 50%, rgba(12, 14, 12, .4) 100%));
}

@keyframes incZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes incUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes incSweep { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes incLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* En el editor la vista previa no navega: un clic selecciona el bloque. */
.inc-vista-previa { pointer-events: none; }

/* Sin animaciones al editar: cada cambio vuelve a pintar la sección. */
.inc-vista-previa *,
.inc-vista-previa *::before,
.inc-vista-previa *::after { animation: none !important; }

.inc-aviso-editor {
	margin: 8px clamp(8px, 1.2vw, 16px);
	padding: 18px 20px;
	border: 1px dashed #9EA39F;
	border-radius: 14px;
	background: #F3F3F1;
	color: #4E534F;
	font: 500 14px/1.45 var(--wp--preset--font-family--barlow, Barlow, system-ui, sans-serif);
}

@media (prefers-reduced-motion: reduce) {
	.inc-zoom { animation: none; }
}