/**
 * Zenth Toolkit — zenth-curved-ribbon: mecánica de la cinta curva.
 *
 * Solo layout/estructura/animación (posicionamiento de la foto y el SVG,
 * proporción del lienzo, mecánica del trazo). Sin colores de marca ni
 * tipografías (regla §0.6 del spec de Donantes): el color de la banda
 * (#FAE6B9), el color/fuente del texto (#9C0000, Parkinsans 800/23) viven en
 * el tema, bloque "SE PARTE VOLUNTARIADO" de
 * zenth-toolkit/seeds/style-header.css, con selectores del tipo
 * ".arr-vcontigo .zenth-cribbon__band{stroke:#FAE6B9}" /
 * ".arr-vcontigo .zenth-cribbon__text{fill:#9C0000;font:…}".
 *
 * aspect-ratio de reserva: 1272/530 es la proporción del propio viewBox del
 * SVG (geometría, no marca — fix F2: antes era 1440/220 con
 * preserveAspectRatio="none", que ESTIRABA la curva y el texto; ahora el
 * viewBox es 1:1 con la caja real de desktop y el SVG escala UNIFORME, ver
 * class-zenth-curved-ribbon.php). Igual criterio que ".zenth-arc{aspect-ratio:
 * 1272/656}" en zenth-photo-arc.css. El tema puede sobreescribirla con una
 * altura fija si el diseño real de la sección lo pide a otro breakpoint (como
 * ya hace en los 3 breakpoints de "SE PARTE VOLUNTARIADO").
 */

.zenth-cribbon {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1272 / 530;
	isolation: isolate;
}

/*
 * Fix F4 (Punto 1): selector con la clase repetida (0,2,0) — SIN
 * !important — para ganarle por especificidad a ".elementor img{height:
 * auto;max-width:100%}" (0,1,1) que Elementor mete en su propio frontend
 * CSS. Con una sola clase (0,1,0) ese "height:auto" ganaba y la foto dejaba
 * de llenar la caja de 530px de alto (quedaba a su relación de aspecto
 * natural, ≈476px): un escalón antes de que el degradado ::after llegue a
 * rojo pleno. "width:100%" no tenía este problema (Elementor no toca
 * max-width en su regla, y el valor coincide), pero se repite también para
 * mantener las dos declaraciones bajo el mismo selector.
 */
.zenth-cribbon__img.zenth-cribbon__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zenth-cribbon__svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * Capa propia: el texto se vuelve a pintar en cada frame del bucle
	 * (startOffset). Sin capa propia, ese repintado re-rasterizaba también la
	 * foto y el degradado que comparten la caja de la cinta.
	 */
	will-change: transform;
}

/*
 * El MISMO <path> hace de banda visible (stroke grueso) y de guía del
 * <textPath> del texto -no se duplica la geometría de la curva-. El grosor
 * exacto del stroke (medido contra el mockup) va en el bloque de piel del
 * tema junto al color: el spec de Donantes (§0.6) mete "tamaños" en la
 * misma categoría que colores/tipografías, así que también le toca vivir
 * ahí. Aquí solo la mecánica del trazo: sin relleno (el color lo pone el
 * stroke desde el tema) y puntas/uniones redondeadas -de reserva ante un
 * ajuste futuro de la curva en el tema que deje algún extremo del trazo
 * dentro del viewBox visible; con la curva actual (que arranca en x=-150 y
 * termina en x=1450, fuera de los 0-1272 visibles del viewBox) las puntas
 * quedan recortadas por overflow:hidden y no se ven-.
 */
.zenth-cribbon__band {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zenth-cribbon__text {
	dominant-baseline: middle;
}

.zenth-cribbon__textpath {
	/* El desplazamiento en bucle lo escribe zenth-cribbon.js sobre el
	   atributo startOffset (no sobre esta hoja): animar startOffset por CSS
	   @keyframes exige @property, con soporte irregular (spec §5.2). Sin
	   JavaScript el marcado ya sale con startOffset="0%" fijo, así que el
	   texto queda estático por defecto -no hace falta ningún override aquí
	   para prefers-reduced-motion, la reducción de movimiento es el estado
	   de reposo, no una excepción-. */
	white-space: pre;
}

/*
 * Fix F2: SIN desvanecido lateral. El primer intento traía un
 * mask-image aquí (Anexo B §B.7 se había leído como "la banda se
 * desvanece antes de los bordes"), pero el mockup real
 * (specs/inicio/mockup/slice03.png, misma pieza que
 * ref-voluntariado-vs-inicio.png) muestra la banda a PLENA opacidad hasta
 * las dos esquinas redondeadas de la foto, sin fundido — se quita la
 * máscara. El trazo se prolonga mucho más allá de los bordes (ver
 * .zenth-cribbon__band arriba) precisamente para que no haga falta ningún
 * fundido: el propio overflow:hidden de .zenth-cribbon recorta en seco y
 * eso ya es invisible porque ahí la banda sigue siendo la misma meseta
 * plana horizontal.
 */